纯CSS实现旋转不断的效果，开启你的视觉盛宴！

2023-10-31 03:40:15

当我们谈到网页设计时，不可避免地会提到动画。动画能够为网站增添活力和趣味性，让用户获得更好的视觉体验。使用纯CSS实现旋转不断的效果，是一种简单而有效的方法。

纯CSS旋转动画的实现步骤

HTML结构

<div class="container">
  <div class="box"></div>
</div>

在HTML中，我们创建一个div作为容器，并在其中放置另一个div作为旋转元素。

CSS样式

.container {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  border: 1px solid #ccc;
}

.box {
  width: 50px;
  height: 50px;
  margin: 75px auto;
  background-color: #f00;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在CSS中，我们首先为容器设置宽高和边框，然后为旋转元素设置宽高、边框半径和背景颜色，并应用动画。动画的具体实现，是通过@keyframes规则来定义的。我们在其中指定了动画的起始状态和结束状态，以及动画的持续时间和循环次数。

应用实例

我们可以将上述代码应用到实际场景中，比如制作一个简单的加载动画。

<div class="container">
  <div class="box"></div>
</div>

.container {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  border: 1px solid #ccc;
}

.box {
  width: 50px;
  height: 50px;
  margin: 75px auto;
  background-color: #f00;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}