[分享]css做的动画效果图

CSS（Cascading Style Sheets）是一种用于设计网页样式的语言，可以用于实现各种各样的动画效果。下面将介绍一些常见的动画效果及其实现方式。// 抖动效果 keyframes sha...

CSS（Cascading Style Sheets）是一种用于设计网页样式的语言，可以用于实现各种各样的动画效果。下面将介绍一些常见的动画效果及其实现方式。

// 抖动效果
@keyframes shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-10px, 0); }
  30% { transform: translate(10px, 0); }
  40% { transform: translate(-10px, 0); }
  50% { transform: translate(10px, 0); }
  60% { transform: translate(-10px, 0); }
  70% { transform: translate(10px, 0); }
  80% { transform: translate(-10px, 0); }
  90% { transform: translate(10px, 0); }
  100% { transform: translate(0, 0); }
}

// 闪烁效果
@keyframes blink {
  0% { opacity: 1;}
  50% { opacity: 0.5;}
  100% { opacity: 1;}
}

// 缩放效果
@keyframes scale {
  0% { transform: scale(1, 1); }
  50% { transform: scale(0.5, 0.5); }
  100% { transform: scale(1, 1); }
} 

上面是三个常见的动画效果的样式代码，其中“shake”是抖动效果，“blink”是闪烁效果，“scale”是缩放效果。这些效果分别定义在一个“@keyframes”代码块中，其中定义了动画的起始状态、中间状态和结束状态。

实际使用时，只需将动画效果的类名添加到HTML元素中即可触发动画，例如：

<div class="shake">抖动效果</div>
<div class="blink">闪烁效果</div>
<div class="scale">缩放效果</div> 

在这里，“shake”、“blink”和“scale”是动画效果的类名，添加到“div”标签中。

通过CSS实现动画效果可以提高网页的交互性和视觉效果，让网页更加生动有趣。