CSS好玩的搅动动画

2023-10-25 16:17:27

CSS搅动动画的原理

CSS搅动动画的原理是利用CSS的transform属性来改变元素的形状。transform属性可以应用各种各样的变形效果，包括平移、旋转、缩放、倾斜等。通过将transform属性应用到元素上，并不断改变其值，就可以实现搅动动画的效果。

CSS搅动动画的实现

要实现CSS搅动动画，可以使用以下步骤：

创建一个元素并为其添加样式。
使用transform属性为元素应用变形效果。
使用CSS动画或JavaScript来改变transform属性的值。

下面是一个简单的CSS搅动动画的例子：

<div class="box">
  <p>这个元素将执行搅动动画</p>
</div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(15deg);
  }

  50% {
    transform: rotate(-15deg);
  }

  75% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.box {
  animation: shake 1s infinite;
}

这个例子中，我们创建了一个名为.box的元素，并为其添加了样式。然后，我们使用@keyframes规则创建了一个名为shake的动画，这个动画将元素旋转15度，然后旋转-15度，再旋转15度，最后旋转回0度。最后，我们使用animation属性将shake动画应用到.box元素上，并指定动画无限循环播放。