使用HOVER伪类制作太极动图

首先 我们可以将太极分解为三个圆 一个大圆中间有两个小圆
这样BODY中代码为

然后开始做下面的大圆
代码为

：root,html是设置页面背景 方便显示出太极图
其中animation 为后面旋转 控制动画代码
现在页面显示为

这里可以发现比太极图少了一些弧形
所以接下来我们开始做

.father ：:before
：:after 此代码意思为在 该属性前后插入内容
我们就做好了太极下面的大圆

上方小圆的做法与第一步相同 我就直接上代码了

.left{
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-color: white;
        border-radius: 100px;
        position: relative;
        left: -65px;
        top: -65px;
    }
    .right{
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-color:black;
        border-radius: 100px;
        position: relative;
        top: -40px;
        left: 15px;
        z-index: 1；
    }
    注意 z-index{ 因为前面使用了定位布局所以有图层覆盖，在这里设置 他图层位置不让他被覆盖}
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210318131312901.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NVTlpFWFVF,size_16,color_FFFFFF,t_70#pic_center)

然后就只剩下让他选择起来，
这里我们会用到一个CSS3中的关键帧动画
关键字为@kekforms{
}
@keyframes ss{
from{
transform: rotateZ(0deg);
}
to{

          transform: rotateZ(360deg) ;
        }
    }
   
   这是动画的剧本， 我们现在只用在大圆中调用就可以了
   animation:ss 2s  linear infinte;
   就可以得到旋转效果了

学会的朋友可以给个赞吗