css制作动态特效

CSS 动态特效制作方法

关键属性与技术 CSS 动态特效主要通过 transition、animation、transform 等属性实现。transition 用于简单过渡效果，animation 配合 @keyframes 可实现复杂动画序列。

基础过渡效果

.element {
  transition: all 0.3s ease-in-out;
}
.element:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

通过定义 transition 属性和触发状态（如 :hover），元素会在状态变化时产生平滑过渡。

关键帧动画

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.element {
  animation: bounce 2s infinite;
}

使用 @keyframes 定义动画关键帧，通过 animation 属性应用动画，可控制持续时间、循环次数等参数。

3D 变换效果

.element {
  transform-style: preserve-3d;
  transition: transform 1s;
}
.element:hover {
  transform: rotateY(180deg);
}

通过 transform-style 和 3D 变换函数（如 rotateY），可创建三维空间中的动态效果。

混合特效示例

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,0,0,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); }
}
.button {
  animation: pulse 2s infinite;
  transition: background 0.3s;
}
.button:hover {
  background: #ff0000;
}

结合关键帧动画和过渡效果，可创建更丰富的交互体验。

性能优化建议 优先使用 opacity 和 transform 进行动画，这些属性不会触发重排；避免在动画中使用 box-shadow 等高性能消耗属性；使用 will-change 提示浏览器优化：

.element {
  will-change: transform, opacity;
}