1.变换函数-2D平移#

平移（translate）沿X/Y轴移动元素位置，不改变元素的实际布局（原位置仍保留）

场景：

1. 悬停元素微调。鼠标放入元素上下或者左右移动（添加过渡更优雅）
2. 元素居中。元素实现水平垂直居中

• 平移不影响页面布局，仅是视觉上的移动
• 添加鼠标经过元素移动，优先transform而不是通过left，top等，性能更佳
• 如果单位是百分比，相对于元素自身尺寸，而非父容器

示例：

1
.box {
2
  transition: transform 0.3s;
3
}
4

5
.box:hover {
6
  transform: translate(10px, 10px);
7
}

2.变换函数-2D旋转#

旋转（rotate）通过改变元素在平面或空间中的角度实现视觉效果

场景：

1. 悬停动画（如按钮旋转）
2. 加载动画（无线循环旋转）

语法：

1
.box {
2
  transform: rotate(360deg); /* 旋转 */
3
  transform-origin: center center; /* 旋转的基点，默认中心 */
4
}

• 参数单位：deg(度)，正值是顺时针，负值是逆时针
• transform-origin设置旋转中心点
• 属性值支持left，top等，也可以支持数字比如像素和百分比等

3.变换函数-2D缩放#

缩放（scale）用于调整元素尺寸，且不改变元素在文档流中的原始占位

场景：

1. 悬停放大。鼠标悬停在元素上时，元素放大

语法： transform: scale(1.5); 整体放大1.5倍 transform: scale(1.5, 1); 水平方向放大，垂直方向不放大

• 单参数：同时作用于x轴和y轴，等比例缩放
• 双参数：分别作用于x轴和y轴，不同比例缩放

4.变换函数-2D倾斜#

倾斜（skew）用于对元素进行二维*倾斜变换，通过沿x轴或y轴扭曲元素的几何形状

场景：

1. 鼠标经过元素倾斜效果

语法： transform: skew(30deg, 30deg); 水平方向倾斜30度，垂直方向倾斜30度 transform: skewX(30deg); 水平方向倾斜30度，垂直方向不倾斜 transform: skewY(30deg); 垂直方向倾斜30度，水平方向不倾斜

• 单参数：y轴默认倾斜角度为0
• 双参数：分别作用于x轴和y轴，不同角度倾斜
• transform-origin设置倾斜中心点，默认中心

5.过渡transition完整写法#

transition完整写法： transition: 过渡属性 持续时间 速度曲线 延迟时间;

• 过渡属性：过渡属性属性值变化时触发过渡效果
• 持续时间：属性值变化时的过渡时间，单位秒
• 速度曲线：属性值变化时的过渡曲线
• 延迟时间：属性值变化时的过渡时间延迟，单位秒

过渡属性： 过渡属性的值可以是：

• none：表示没有过渡效果
• all：表示所有可过渡的属性都参与过渡（默认值）
• 具体属性名：如 transform、opacity、background-color、width、height、margin、padding、border、box-shadow 等常用CSS属性

注意：并非所有CSS属性都可以过渡，只有具有中间值的属性才能实现平滑过渡效果。颜色、尺寸、位置、透明度等连续性属性最适合过渡。

速度曲线：

速度曲线参数	效果描述	曲线可视化
ease	默认值，慢速开始 → 加速 → 慢速结束，适合大多数自然过渡（如按钮悬停）
linear	匀速运动，无加速/减速，适合机械感效果（如进度条）
ease-in	慢速开始 → 逐渐加速，适合元素从静止启动（如弹窗出现）
ease-out	快速开始 → 逐渐减速，适合元素退出（如关闭动画）
ease-in-out	慢速开始和结束，中间加速，适合对称性动画（如页面切换）
cubic-bezier(x1,y1,x2,y2)	贝塞尔曲线。通过四值（0-1范围内）自定义速度曲线，实现弹跳、骤停等创意效果（如按钮点击反馈）

工具：

1. 可视化编辑贝塞尔曲线
2. 获取常用缓动函数的预设值

6.变换函数-复合写法#

在css中，transform属性的复合写法是将每个函数用空格隔开（多个变换函数组合使用）

语法； transform: A() B() C();

顺序：

• 核心规则：从右到左的执行顺序
• 实际的执行顺序是：先执行最右侧的C()，再执行B()，最后执行A()

示例：轮胎移动效果

1
.img {
2
  transition: transform 0.3s;
3
}
4

5
.box:hover img {
6
  transform: translate(10px, 10px) rotate(360deg);
7
}

3D旋转-两面翻转的盒子示例#

backface-visibility：当元素旋转时，是否显示背面面

• visible：显示背面
• hidden：隐藏背面

示例：创建一个正面粉色反面蓝色，悬停时可翻转的盒子

1
.box {
2
  position: relative;
3
  margin: 100px auto;
4
  width: 600px;
5
  height: 300px;
6
}
7

8
.box .front,
9
.box .back {
10
  position: absolute;
11
  top: 0;
12
  left: 0;
13
  width: 100%;
14
  height: 100%;
15
  /* 元素翻转隐藏背面 */
16
  backface-visibility: hidden;
17
  transition: transform 0.6s;
18
}
19

20
.box .front {
21
  background-color: lightblue;
22
  transform: rotateY(0deg);
23
}
24

25
.box .back {
26
  background-color: pink;
27
  transform: rotateY(-180deg);
28
}
29

30
.box:hover .front {
31
  transform: rotateY(180deg);
32
}
33
.box:hover .back {
34
  transform: rotateY(0deg);
35
}

关键帧#

关键帧（keyframe）是动画和视频制作中用于定义动作或状态变化的核心节点，它决定了动画的其实，转折和结束状态，中间帧（插帧）通过算法自动生成，形成连贯的动画效果

动画的使用#

动画的使用要先定义动画，再使用动画

1.定义动画：

1
@keyframes move {
2
  0% {
3
    transform: translateX(0);
4
  }
5
  50% {
6
    transform: translateX(50px);
7
  }
8
  100% {
9
    transform: translateX(100px);
10
  }
11
}

• @keyframes：定义动画的关键帧
• move：动画名称，自定义
• 0% 50% 100%：关键帧的时间点，0%表示动画开始，50%表示动画中间，100%表示动画结束
• 关键帧可以定义多个，每个关键帧可以设置不同的属性值

1
@keyframes move {
2
  from {
3
    transform: translateX(0);
4
  }
5
  to {
6
    transform: translateX(100px);
7
  }
8
}

• from：动画开始时的状态，相当于0%
• to：动画结束时的状态，相当于100%

2.使用动画：动画属性要写到目标元素里面

1
.box {
2
  animation: move 1s;
3
}

• animation：应用动画
• move：动画名称，与定义动画时的名称一致
• 1s：动画持续时间，单位为秒

animation属性完整写法#

animation: 动画名称 动画持续时间 速度曲线 延迟时间 播放次数 播放方向 执行完毕状态;

• 动画名称和动画时长是必填项，其余可以省略，但是要保证书写顺序
• 动画属性要写到目标元素里面

|子属性|默认值|说明| |速度曲线|ease|动画速度曲线，可选值有linear（匀速）和cubic-bezier()（自定义贝塞尔曲线）等| |延迟时间|0s|动画延迟时间，单位为秒| |播放次数|1|动画播放次数，无限循环播放为infinite| |播放方向|normal|动画播放方向，可选值还有reverse（反向播放）和alternate（交替播放）| |执行完毕状态|none|动画结束后状态（如forwards保留最后一帧，backwards回到第一帧）|

step逐帧动画#

速度曲线除了常见的linear、ease、cubic-bezier等，还包含steps()函数，steps()是CSS动画中用于控制动画分段执行的计时函数，它通过将动画分割为离散的步骤，实现类似传统帧动画（逐帧动画）的跳跃效果

语法：

1
animation: move 1s steps(8) infinite;

• steps(步数)，步数为正整数
• 经常和背景图片（精灵图）来实现动画效果

逐帧动画原理：

1. 移动图片。其实是通过变化背景位置，展示不同的图片帧，实现动画效果
2. 图片有N个不同图形，steps()步数就写N

示例：

• 盒子大小：宽度548px，高度513px
• 背景图片大小：宽度13700px，高度513px
• 背景图片一共有25张小图片组成

1
@keyframes move {
2
  0% {
3
    background-position: 0 0;
4
  }
5
  100% {
6
    background-position: -13700px 0;
7
  }
8
}
9

10
.box {
11
  width: 548px;
12
  height: 513px;
13
  background: url(./images/box.png) no-repeat left/13700px 513px;
14
  /* 使用动画 */
15
  animation: move 1s steps(25) infinite;
16
}

box-reflect: 倒影效果#

box-reflect是css中用于为元素创建倒影效果 语法； box-reflect: 倒影方向 倒影距离 倒影图像

1. 倒影方向（必写）：

• above:倒影在元素上方
• below:倒影在元素下方
• left:倒影在元素左侧
• right:倒影在元素右侧

2. 倒影距离（必写）：

• 倒影距离，单位为像素

3. 倒影图像（可选）：

• 倒影图像，可选值还有none（无倒影）
• url(./images/reflect.png)：倒影图像，可选值还有linear-gradient()（线性渐变）、radial-gradient()（径向渐变）等

注意，因为兼容性问题，前面需要添加-webkit-前缀，例如-webkit-box-reflect: below 10px #f5f5f5;

() 父亲选择器#

:has()选择器是css中用于选择包含指定子元素的元素 语法； :has(子元素)

1. 子元素（必写）：
   • 子元素，可选值还有::first-child（第一个子元素）、::last-child（最后一个子元素）、::nth-child(第n个子元素)（第n个子元素）等
   • 例如：:has(子元素)：选择包含子元素的元素
   • 例如：:has(子元素):nth-child(2)：选择包含子元素的第2个子元素

() 反选器#

:not()选择器是css中用于选择不包含指定子元素的元素 语法； :not(子元素)

1. 子元素（必写）：
   • 子元素，可选值还有::first-child（第一个子元素）、::last-child（最后一个子元素）、::nth-child(第n个子元素)（第n个子元素）等
   • 例如：:not(子元素)：选择不包含子元素的元素
   • 例如：:not(子元素):nth-child(2)：选择不包含子元素的第2个子元素

opacity 透明度#

opacity是css中用于设置元素透明度的属性 语法； opacity: 透明度值

1. 透明度值（必写）：
   • 透明度值，取值范围为0到1之间
   • 0：完全透明
   • 1：完全不透明
   • 0.5：半透明
   • 例如：opacity: 0.5;：设置元素透明度为0.5