[分享]css写一下左右抖动的动画

CSS是一种样式表语言，可用于为网页添加样式和格式。使用CSS编写左右抖动动画是一种流行的网页效果之一。以下是一个示例CSS代码段，可以实现一个简单的左右抖动效果： / 将元素定位方式设置为相对定位 ...

CSS是一种样式表语言，可用于为网页添加样式和格式。使用CSS编写左右抖动动画是一种流行的网页效果之一。以下是一个示例CSS代码段，可以实现一个简单的左右抖动效果：

 /* 将元素定位方式设置为相对定位 */
  .shake {
    position: relative;
  }

  /* 定义左右抖动动画 */
  @keyframes shake {
    0% { left: 0; }
    10% { left: -10px; }
    20% { left: 10px; }
    30% { left: -10px; }
    40% { left: 10px; }
    50% { left: -10px; }
    60% { left: 10px; }
    70% { left: -10px; }
    80% { left: 10px; }
    90% { left: -10px; }
    100% { left: 0; }
  }

  /* 应用动画效果 */
  .shake:hover {
    animation: shake 0.5s;
  } 

在上面的代码段中，我们创建了一个名为shake的CSS类，其中使用CSS动画来定义左右抖动的效果。我们通过将元素的定位方式设置为相对定位，来使它们相对于它们的初始位置发生偏移。

通过使用@keyframes指令创建一个名为shake的动画序列。这个序列定义了在10%到90%的时间内，元素应该在什么位置上来左右抖动。最后，我们将动画应用到.shake:hover类上，以便在当用户将鼠标悬停在元素上时触发动画效果。