CSS3 连续旋转动画（就像一个加载的日晷）

在本文中，我们将介绍如何使用CSS和CSS3创建一个连续旋转动画，就像一个加载的日晷一样。CSS动画是网页设计中常用的技术之一，可以为用户提供更丰富、更有趣的交互体验。

阅读更多：CSS 教程

什么是CSS动画

CSS动画是指使用CSS属性和值来创建动画效果的技术。通过在CSS样式表中定义动画的关键帧（即开头和结束）以及插值（中间的过渡效果），我们可以实现各种各样的动画效果。CSS动画不需要使用JavaScript，只需要使用纯粹的CSS代码就可以实现。

连续旋转动画的实现步骤

要实现一个连续旋转的动画效果，我们需要按照以下步骤进行：

步骤1：创建一个HTML元素

首先，我们需要在HTML中创建一个元素来展示旋转动画效果。可以使用<div>元素，并通过CSS设置其宽度和高度，以及背景颜色等属性。

<div class="sundial"></div>

步骤2：定义关键帧动画

接下来，我们需要在CSS样式表中定义动画的关键帧。关键帧是指动画的起始和结束状态。

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

在上述代码中，我们定义了一个名为rotate的动画关键帧。在0%时，元素不进行旋转（角度为0度），在100%时，旋转360度（一圈）。

步骤3：应用动画效果

最后，我们需要将定义好的动画应用到HTML元素上。

.sundial {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  animation: rotate 2s linear infinite;
}

在上述代码中，我们通过animation属性将之前定义的动画关键帧应用到.sundial元素上。2s指动画的持续时间为2秒，linear表示动画的过渡效果是线性的，infinite表示动画会永远循环播放。

示例

下面是一个完整的连续旋转动画的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .sundial {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
      animation: rotate 2s linear infinite;
    }
  </style>
</head>
<body>
  <div class="sundial"></div>
</body>
</html>

将上述代码保存为一个HTML文件并在浏览器中打开，你将看到一个红色的方块不停地旋转。这就是我们通过CSS和CSS3实现的连续旋转动画效果。