css动画与交互：提升用户体验

1. CSS过渡（Transition）

• 作用：平滑状态变化（如悬停效果）

• 关键属性：

• transition-property（过渡属性，如color）

• transition-duration（持续时间，如0.3s）

• transition-timing-function（缓动函数，如ease-in-out）

• 示例：

  css.btn {transition: all 0.3s ease-in-out;}.btn:hover {background: #ff0000;transform: scale(1.05);}
  

2. CSS动画（Animation）

• 作用：创建复杂动画序列（如加载动画）

• 关键属性：

• @keyframes（定义动画帧）

• animation-name（引用动画）

• animation-duration（持续时间）

• animation-iteration-count（循环次数，如infinite）

• 示例：

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

3. 3D变换与滤镜

• 3D变换：

• transform: rotateX(45deg)（X轴旋转）、translateZ(100px)（Z轴位移）

• 需配合perspective（透视距离）和transform-style: preserve-3d（保持3D空间）

• 滤镜效果：

• filter: blur(5px)（模糊）、grayscale(100%)（灰度）、drop-shadow(2px 2px 4px black)（阴影）