标签 css3 下的文章

2024-08-09

CSS3中实现文本单行省略和多行省略的方法是使用text-overflow属性配合其他属性。

单行省略：




.single-line-ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出容器部分的文本隐藏 */
  text-overflow: ellipsis; /* 文本超出部分显示省略号 */
}

多行省略需要使用-webkit-line-clamp属性，该属性是一个不是标准的CSS属性，它需要配合display: -webkit-box和-webkit-box-orient: vertical使用。

多行省略（例如显示3行）：




.multi-line-ellipsis {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直方向的子元素排列 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  overflow: hidden; /* 超出容器部分的文本隐藏 */
  text-overflow: ellipsis; /* 文本超出部分显示省略号 */
}

注意：-webkit-line-clamp属性是一个不是标准的属性，它在非WebKit浏览器中可能不会生效。以上代码主要适用于WebKit内核的浏览器，例如Chrome、Safari等。

- 阅读更多 -

Vue3 + Vite + Css3切换主题

System

2024-08-09

所有,css3




<template>
  <div class="theme-switcher">
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const theme = ref('light');
 
function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
  document.body.classList.toggle('theme-light', theme.value === 'light');
  document.body.classList.toggle('theme-dark', theme.value === 'dark');
}
</script>
 
<style>
.theme-light {
  background-color: #fff;
  color: #000;
}
 
.theme-dark {
  background-color: #000;
  color: #fff;
}
</style>

这个简单的Vue 3组件使用Vite创建，包含一个按钮来切换主题。点击按钮时，会更新页面的主题类，从而切换背景和文字颜色。这个例子展示了如何使用Vue 3的<script setup>语法糖以及Vite开箱即用的热重载功能。

- 阅读更多 -

前端01-css3-flex布局

System

2024-08-09

所有,css3

在CSS中，Flexbox布局提供了一种更为有效的方式来对容器内的项目进行排列、对齐和分配空间。Flexbox可以使容器内的项目能够在任何方向上动态扩展和收缩，以最佳方式填充可用空间。

以下是一个简单的Flexbox布局的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex; /* 使用Flex布局 */
  flex-direction: row; /* 设置主轴方向为水平方向 */
  justify-content: space-around; /* 项目在主轴方向上平均分布 */
  align-items: center; /* 项目在交叉轴方向上居中 */
  height: 200px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 项目间距 */
  padding: 10px; /* 项目内填充 */
  background-color: coral; /* 项目背景颜色 */
  color: white; /* 项目文字颜色 */
  font-size: 16px; /* 项目文字大小 */
}

在这个例子中，.flex-container 类使用了 display: flex 属性来指定这个div是一个Flex容器。flex-direction 属性设置了主轴的方向（row为水平，column为垂直），justify-content 属性设置了项目在主轴方向上的对齐方式（这里是平均分布），align-items 属性设置了项目在交叉轴方向上的对齐方式（居中）。.flex-item 类则是对Flex容器内的每个项目进行样式设置。

- 阅读更多 -

使用CSS3实现围绕圆心旋转

System

2024-08-09

所有,css3

要使用CSS3实现元素围绕圆心旋转，可以使用transform属性中的rotate函数。以下是一个简单的例子，演示了如何让一个元素围绕它自己的中心旋转。

HTML:




<div class="rotating-element"></div>

CSS:




.rotating-element {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px;
  animation: rotate 2s infinite linear;
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在这个例子中，.rotating-element是需要旋转的元素。animation属性定义了一个名为rotate的关键帧动画，该动画会使元素持续地旋转360度，每次旋转时间为2秒，并且无限循环。linear关键字确保旋转速度是均匀的。

- 阅读更多 -

使用CSS3画出一个叮当猫HTML源码

System

2024-08-09

所有,css3

以下是使用CSS3创建一个简单叮当猫的HTML源代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doraemon Cat</title>
<style>
  .cat {
    position: relative;
    width: 200px;
    height: 200px;
    background: #000;
    border-radius: 50%;
    box-shadow: inset 0 0 50px #000;
    animation: spin 2s linear infinite;
  }
  .ear {
    position: absolute;
    width: 50px;
    height: 100px;
    background: #000;
    border-radius: 50%;
    top: -50px;
  }
  .ear.left {
    left: -25px;
    transform: rotate(-30deg);
  }
  .ear.right {
    right: -25px;
    transform: rotate(30deg);
  }
  .eye {
    position: absolute;
    width: 20px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    top: 80px;
  }
  .eye.left {
    left: 40px;
  }
  .eye.right {
    right: 40px;
  }
  .nose {
    position: absolute;
    width: 20px;
    height: 15px;
    background: #f00;
    border-radius: 50%;
    top: 110px;
    left: 60px;
  }
  .whisker {
    position: absolute;
    width: 40px;
    height: 20px;
    background: #000;
    border-radius: 50px 50px 0 0;
    top: 140px;
    left: 20px;
    transform-origin: bottom center;
    animation: bounce 2s infinite;
  }
  .whisker.right {
    left: auto;
    right: 20px;
    transform-origin: bottom center;
  }
  .tail {
    position: absolute;
    width: 40px;
    height: 60px;
    background: #000;
    border-radius: 50px 50px 0 0;
    bottom: -60px;
    left: 80px;
    transform-origin: bottom center;
    animation: tail-spin 2s linear infinite;
  }
  .tail:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    bottom: -40px;
    left: -10px;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes bounce {
    0%, 100% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(1.5);
    }
  }
  @keyframes tail-spin {
    0% {
      transform: rotate(-45deg) translateX(5px);
    }
    100% {
      transform: rotate(45deg) translateX(-5px);
    }
  }
</style>
</head>
<body>
<div class="cat">
  <div class="ear left"></div>
  <div class="ear right"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="nose"></div>

- 阅读更多 -

CSS3 转换，死磕原理，写给前端开发的小程序布局指南

System

2024-08-09

所有,css3

在CSS3中，转换（transform）是一种改变元素位置、大小、角度等属性的强大方式。下面是一些使用CSS3转换的例子：

旋转（rotate）：




.rotate-30deg {
  transform: rotate(30deg);
}

缩放（scale）：




.scale-2x {
  transform: scale(2, 2);
}

平移（translate）：




.move-right-100px {
  transform: translateX(100px);
}

倾斜（skew）：




.skew-45deg {
  transform: skew(45deg);
}

CSS3转换可以用来制作复杂的动画效果，也可以用来简化布局过程。例如，使用转换可以创建视觉上的分层效果，或者用来制作响应式设计中的流式布局。

记住，为了让转换生效，你可能需要添加一个浏览器前缀，如-webkit-用于Chrome、Safari和新版本的Opera，-moz-用于Firefox，以及-ms-用于Internet Explorer。但从2021年起，主流浏览器基本不再需要前缀。

System

2024-08-09

所有,css3

CSS3的text-overflow属性通常与white-space和overflow属性一起使用，以确保当文本超出其包含元素的宽度时，文本会以省略号的形式显示多余的内容。

以下是实现文本截取并显示省略号的CSS样式代码：




.ellipsis {
  white-space: nowrap;      /* 确保文本在一行内显示 */
  overflow: hidden;         /* 隐藏超出容器的文本 */
  text-overflow: ellipsis;  /* 使用省略号表示被截断的文本 */
}

接下来是HTML部分：




<div class="ellipsis">
  这是一段很长的文本内容，如果超出了包含它的元素的宽度，那么多余的文本将以省略号的形式显示。
</div>

在这个例子中，如果div的宽度不足以容纳全部文本内容，那么超出的部分就会被省略号...替代。

- 阅读更多 -

CSS3网页常见动态效果……

System

2024-08-09

所有,css3

在CSS3中，创建动态效果可以使用各种不同的属性，如变形（transforms）、动画（animations）、过渡（transitions）等。以下是一些常见的动态效果的实现方法：

淡入淡出效果：




.fade-in-out {
  animation: fade-in-out 2s infinite;
}
 
@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

滑入滑出效果：




.slide-in-out {
  animation: slide-in-out 2s infinite;
}
 
@keyframes slide-in-out {
  0%, 100% {
    transform: translateX(100px);
  }
  50% {
    transform: translateX(0);
  }
}

旋转效果：




.spin {
  animation: spin 2s linear infinite;
}
 
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

缩放效果：




.scale {
  animation: scale 2s infinite;
}
 
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

这些例子展示了如何使用CSS3的@keyframes和animation属性来创建简单的动态效果。实际应用时，可以根据具体需求调整动画的持续时间、迭代次数、时间函数等参数。

- 阅读更多 -

css3 box-shadow 浮雕风格按钮

System

2024-08-09

所有,css3




/* 浮雕式按钮样式 */
.floating-button {
    position: relative; /* 相对定位 */
    top: 0;
    left: 0;
    width: 120px; /* 按钮宽度 */
    height: 50px; /* 按钮高度 */
    background-color: #4CAF50; /* 按钮背景颜色 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    text-align: center; /* 文本居中 */
    line-height: 50px; /* 文本行高与高度相同，使得文本垂直居中 */
    color: white; /* 文本颜色 */
    font-size: 16px; /* 文本大小 */
    cursor: pointer; /* 鼠标悬停时显示指针光标 */
    z-index: 1; /* 层叠顺序 */
    transition: box-shadow 0.3s ease; /* 盒阴影变化过渡效果 */
}
 
/* 鼠标悬停时的盒阴影效果 */
.floating-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
 
/* 鼠标点击时的盒阴影效果 */
.floating-button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    top: 1px; /* 按钮被点击时稍微上移，模拟点击下沉的效果 */
}

这段代码定义了一个浮雕式的按钮，当鼠标悬停时，盒阴影会变大，在鼠标点击时，盒阴影会变小，按钮会稍微上移，通过视觉变化模拟按钮被按下的效果。这种效果提升了用户交互的真实感，是一种常用的CSS3特效。

- 阅读更多 -

打造经典游戏：HTML5与CSS3实现俄罗斯方块

System

2024-08-09

所有,css3

以下是一个简化的JavaScript代码示例，用于实现俄罗斯方块游戏中方块的下落和左右移动功能：




// 定义方块的种类和颜色
const shapes = {
  I: [
    [0, 0, 0, 0],
    [1, 1, 1, 1],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ],
  O: [
    [1, 1],
    [1, 1]
  ],
  T: [
    [0, 1, 0],
    [1, 1, 1],
    [0, 0, 0]
  ],
  // ... 其他方块定义
};
 
// 构造函数定义一个方块
function Block(shape, x, y) {
  this.shape = shape;
  this.x = x;
  this.y = y;
}
 
// 方块下落的函数
Block.prototype.moveDown = function() {
  this.y += 1;
};
 
// 方块左移的函数
Block.prototype.moveLeft = function() {
  this.x -= 1;
};
 
// 方块右移的函数
Block.prototype.moveRight = function() {
  this.x += 1;
};
 
// 实例化一个方块
const block = new Block(shapes.I, 4, 0);
 
// 方块下落
block.moveDown();
// 方块左移
block.moveLeft();
// 方块右移
block.moveRight();

这个示例展示了如何定义一个方块，并实现其基本的移动功能。在实际的游戏中，还需要添加旋转、结合逻辑、游戏结束判定等功能。

- 阅读更多 -