[分享]css3抖动2秒

CSS3中的抖动效果是非常有趣和实用的，可以用于吸引用户的注意力，让页面更加生动有趣。下面我们来介绍一下如何使用CSS3实现抖动2秒的效果。/定义一个Keyframes进行抖动动画/ keyframe...

CSS3中的抖动效果是非常有趣和实用的，可以用于吸引用户的注意力，让页面更加生动有趣。下面我们来介绍一下如何使用CSS3实现抖动2秒的效果。

/*定义一个Keyframes进行抖动动画*/
@keyframes shake {
  0% {transform: translate(0, 0) rotate(0);}
  10% {transform: translate(-10px, 0) rotate(-5deg);}
  20% {transform: translate(10px, 0) rotate(5deg);}
  30% {transform: translate(-10px, 0) rotate(-5deg);}
  40% {transform: translate(10px, 0) rotate(5deg);}
  50% {transform: translate(-10px, 0) rotate(-5deg);}
  60% {transform: translate(10px, 0) rotate(5deg);}
  70% {transform: translate(-10px, 0) rotate(-5deg);}
  80% {transform: translate(10px, 0) rotate(5deg);}
  90% {transform: translate(-10px, 0) rotate(-5deg);}
  100% {transform: translate(0, 0) rotate(0);}
}

/*在需要抖动的元素上应用动画和时间*/
.element {
  animation: shake 2s;
} 

以上代码中，我们先定义了一个名为shake的Keyframes，其中每个阶段都有自己的位移和旋转角度，形成了一个周期性的抖动动画。接着，我们在需要抖动的元素上应用这个动画，并使用2s的时间来实现2秒的抖动效果。

通过这种方法，我们可以简单、快速地实现一个令人愉悦的抖动效果，给页面增添一份趣味和活力。