交互动效设计

2D变换

CSS transform是元素进行2D/3D变换的核心属性，支持平移、旋转、缩放、倾斜等效果，且不破坏原有文档流布局。

平移

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

使用场景：

1.悬停元素微调。鼠标放入元素上下或者左右移动（添加过渡更优雅）

2.元素居中。元素实现水平垂直居中。

语法：

transform: translate(20px,30px); /* x y 同时移动*/
transform: translateX(50%); /* x 轴移动 */
transform: translateY(-50%); /* y 轴移动 */

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

结合top:50%;left:50%;与translate(-50%,-50%)实现元素居中

旋转

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

使用场景：

1.悬停动画（如按钮旋转）

2.记载动画（无限循环旋转）

语法：

transform：rotate（360deg）；

• 参数单位：deg（度），正值是顺时针，负值是逆时针。

transform-origin：left top；

• transform-origin设置旋转中心点。
• 属性值支持left、top等，也可以支持数字，比如像素和百分比等。

注意：行内元素的布局特性（无法设置宽高、盒模型限制、transform基准异常）会破坏旋转效果的稳定性和精确性，所以文字类要转换成行内块或者块级元素。比如字体图标需要转换。

缩放

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

使用场景：

1.悬停放大等。

倾斜

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

使用场景：

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

过渡进阶

transition完整写法：

transition：过渡属性 持续时间 速度曲线 延迟时间；

transition：all linear 1s；

所有属性添加过渡效果，过渡持续1秒，匀速，延迟1秒执行。

变换函数-复合写法

在CSS中，transform属性的复合写法（多个变换函数组合使用）

语法：

transform：A() B() C()；

3D变换

CSS 3D效果通过将二维元素在三维空间中进行变换，为网页添加立体感和动态交互体验。

使用场景：

1.卡片翻转效果。

2.3D幻灯片/轮播图

3.数据可视化。立体图标（如3D柱状图）等

“相比JavaScript或WebGL，CSS 3D利用GPU加速，动画更流畅，性能更高效。”

3D旋转

透视

“透视”（perspective）一词源于拉丁文“perspclre”（看透），指在平面上描绘物体的空间关系的方法或技术。

在CSS中，透视效果（perspective）用于模拟人眼观察3D空间时的近大远小效果。

3D位移

CSS 3D平移函数translateZ()和translate3d()

动画

CSS3的animation是一种通过定义关键帧和动画属性来实现元素动态效果的技术。

优势：

• 性能高效：通过浏览器原生支持，利用GPU加速渲染，避免频繁的JavaScript计算开销。
• 代码简洁：解决了传统CSS过渡（transition）只能定义两帧状态的局限性。可以利用关键帧实现更复杂动画。
• 交互增强：支持与用户操作（如悬停、点击）结合，提升网页的动态表现力和用户体验。

关键帧：

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

动画使用：先定义动画，后使用动画

使用动画

animation：动画名称 动画时长；

• 动画属性要写到目标元素里面。

animation：move 1s；

animation完整写法

注意：animation-play-state不能写到animation里面，要单独写。

逐帧动画

steps逐帧动画：

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

语法：

animation：move 1s steps(8) infinate；

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

逐帧动画的原理：

1.移动图片。其实是通过变化背景位置，移动距离就是图片宽度。

2.图片有N个不同图形，steps(步数)就写N

动效案例

新知识：

inset：3px；是针对于定位，写法更简单。

等价于top:3px；left:3px；right:3px；bottom:3px；

z-index：-1；可以被标准流盒子压住。