css 画太极圆 _肆意一个随手的编纂器

最近在某app看到一个哥们画了一个太极圆，但是使用了很多元素，所以自己也想尝试一下。
需要这些哦
肆意一个随手的编纂器
div + css
方式/
1页面结构，这里我们只有一个元素来搞定太极圆。
<div class="eightdiagrams"></div>

文章插图

2我们先来画一个上面为白色布景下方为黑色布景的圆。
.eightdiagrams {
position: relative;
width: 96px;
height: 48px;
float: left;
background-color: #fff;
border-color: #000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 50%;
animation: rotate 2s linear infinite;
}
注：这里我们用一半的元素布景和下面的边框实现这个结果。

文章插图

文章插图

3操纵伪元素::before、::after画两个空心圆。
.eightdiagrams::before,
.eightdiagrams::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
background-color: #fff;
border: 18px solid #000;
border-radius: 50%;
}
注：为了削减代码量这里我们把两个圆的界说放在了一路。

文章插图

4设置空心圆的位置
top: 50%;
left: 0;

文章插图

5设置另一个空心圆，并调整位置
.eightdiagrams::after {
left: 50%;
background-color: #000;
border-color: #fff
}
一个静态的太极圆，搞定。

文章插图

6添加扭转动画，
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

7为了eightdiagrams添加animation ，让它动起来。
animation: rotate 2s linear infinite;

【css 画太极圆】大功乐成，利用一个元素画出太极圆动画。

以上内容就是css 画太极圆的内容啦，希望对你有所帮助哦！