[分享]css3屏幕抖动特效

CSS3 屏幕抖动特效是一种很流行的网页特效，它可以为页面增加一些生动的感觉。以下是一个简单的例子：

 .shake {
    animation: shake 0.5s;
  }

  @keyframes shake {
    0% { transform: translate(0, 0) rotate(0) }
    10% { transform: translate(-10px, 0) rotate(-10deg) }
    20% { transform: translate(10px, 0) rotate(10deg) }
    30% { transform: translate(-10px, 0) rotate(-10deg) }
    40% { transform: translate(10px, 0) rotate(10deg) }
    50% { transform: translate(-10px, 0) rotate(-10deg) }
    60% { transform: translate(10px, 0) rotate(10deg) }
    70% { transform: translate(-10px, 0) rotate(-10deg) }
    80% { transform: translate(10px, 0) rotate(10deg) }
    90% { transform: translate(-10px, 0) rotate(-10deg) }
    100% { transform: translate(0, 0) rotate(0) }
  } 

如上代码所示，我们首先定义了一个名为 "shake" 的类，并为它添加了一个名为 "shake" 的属性，该属性设定了动画的关键帧和持续时间。

接下来，我们使用 "@keyframes" 命令设定了动画的关键帧。在关键帧中，我们使用了 "transform" 命令来定义元素的变化，通过平移和旋转元素，达到屏幕抖动的效果。我们还设置了每个关键帧的时间，使得动画更加逼真。

最后，我们将 "shake" 类添加到要运用动画的元素中，就可以看到屏幕抖动的效果了！