目录
本文章将用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>