html+css实现太极动画

卿·静

于 2024-11-13 20:27:11 发布

阅读量1.2k

点赞数 26

分类专栏：前端文章标签： html css 前端开发语言青少年编程 css3

本文链接：https://blog.csdn.net/apowers/article/details/143750200

版权

前端专栏收录该内容

17 篇文章

订阅专栏

1.实现原理

2.代码实现

本文章将用html+css实现太极动画效果，具体效果如下图展示，页面中间显示太极，当鼠标移入太极时，太极能够顺时针旋转，当移出鼠标后，太极停止转动。文章后面附有源代码，可创建一个html文件并复制代码运行，即可得到下图效果。

1.实现原理

图片的太极其实为一个div元素，先创建一个div元素，设置背景颜色为上白下黑，需要将元素css样式的background属性设置为linear-gradient(white 50%, black 50%)，linear-gradient表示渐变颜色，从左到右（默认方向，除非通过to关键字指定了其他方向）进行的。white 50%表示在渐变的50%位置（也就是正中间）之前，颜色是白色。black 50%表示从50%位置开始，颜色是黑色。效果如下面的草稿图所示：

然后将元素的边框弧度修改为圆形，设置css样式的border-radius为50%即可得到下面的效果图：

接下来是最关键的部分，即太极中间的两个圆形如何绘制，此时需要利用css的伪元素。假设元素的类样式为.box，创建一个伪元素.box::before,并设置宽高为100px，边框弧度border-radius设置为50%，设置背景颜色为background: radial-gradient(white 25%, black 30%)。radial-gradient表示css径向渐变。径向渐变是从一个中心点向外扩散的渐变效果。在这个特定的例子中，渐变是从圆心开始的。这里的 white 25% 表示在渐变圆圈的25%半径范围内，颜色是白色。black 30% 表示从圆心向外，到达30%半径的位置时，颜色是黑色。然而，这里的渐变过渡并不是线性的，而是在这两个指定的点之间平滑地过渡。为了方便大家看见，图中的伪元素用红线圈起来。

同理，可创建伪元素.box::after，css样式跟第一个伪元素类似，见下面效果图，用红线圈起来的即为创建的第二个伪元素：

太极的基础样式显示出来，接下来是太极的运动。使用css的关键帧动画：

@keyframes rotate：声明了一个动画关键帧（keyframes）的名称，这里是 rotate,也可以是其他名称，比如rotate1,test1之类的。
0%：这是动画的起始点，表示动画开始时的状态。在这个状态下，transform: rotate(0deg); 指定了元素应该被旋转0度，即保持原始位置不变。
100%：这是动画的结束点，表示动画完成时的状态。在这个状态下，transform: rotate(360deg); 指定了元素应该被旋转360度，即完成了一个完整的圆周旋转。

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

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

将这个关键帧动画给这个太极元素，假设太极元素的类元素为.box，设置animation属性使用该关键帧动画，代码如下：

.box 元素将会应用 rotate 动画。
动画将持续0.5秒完成一个完整的周期。
动画将以线性速度linear进行，即匀速运动，速度在整个动画过程中保持不变。
infinite表示动画将无限次重复。
paused表示初始状态为暂停，如果没有paused，太极元素在最开始就开始运动。

.box {
  animation: rotate 0.5s linear infinite paused;
}

最后是鼠标移入元素让其运动，代码如下，将animation-play-state设置为running，即让元素开始运动，:hover表示鼠标移动到了元素上。

.box:hover {
  animation-play-state: running;
}

2.代码实现

下面是最终代码，在做个人项目时，可以将其作为图标应用到网页中，提高页面的观赏性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      background-color: antiquewhite;
    }

    .box {
      width: 200px;
      height: 200px;
      background: linear-gradient(white 50%, black 50%);
      display: flex;
      align-items: center;
      border-radius: 50%;
      margin: 100px auto;
      animation: rotate 0.5s linear infinite paused;
    }

    .box:hover {
      animation-play-state: running;
    }

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

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

    .box::before {
      content: "";
      width: 100px;
      height: 100px;
      display: block;
      background: radial-gradient(white 25%, black 30%);
      border-radius: 50%;
    }

    .box::after {
      content: "";
      width: 100px;
      height: 100px;
      display: block;
      background: radial-gradient(black 25%, white 30%);
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="box">

  </div>
</body>

</html>