[分享]css做钟摆摇晃动画

CSS是一种强大的样式表语言，它可以快速地为我们的网页绘制各种美丽的动画效果。其中，钟摆摇晃动画是一种十分有趣的效果，下面让我们来学一下吧。.clock { width: 300px; height:...

CSS是一种强大的样式表语言，它可以快速地为我们的网页绘制各种美丽的动画效果。其中，钟摆摇晃动画是一种十分有趣的效果，下面让我们来学一下吧。

.clock {
  width: 300px;
  height: 300px;
  border: 5px solid black;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
  overflow: hidden;
}

.pendulum {
  width: 10px;
  height: 100px;
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: center bottom;
  animation: swing 2s ease-in-out infinite;
}

@keyframes swing {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
} 

以上代码使用了CSS的动画关键词@keyframes，同时使用了transform属性来控制旋转的角度。代码中我们从10度到-10度再到10度来制造钟摆的摇晃效果。并且，我们将过程设置了2秒钟，使得摇晃的速度适中。

对于这个动画效果，我们还需要为钟摆添加一些样式属性。我们可以使用CSS中的border-radius来制造一个圆形的表面，并使用position属性使钟摆处于相对位置。最后，在HTML中添加一个class为“.pendulum”的元素，就可以实现钟摆的摇晃动画效果了。

通过这个例子，我们可以看到CSS中的动画效果有着非常丰富的功能，我们可以为网页添加各种特效，增强页面的视觉效果。希望大家可以好好利用这个工具，为网页开发中增添更多的色彩。