css 画太极圆
东西/原料
- 肆意一个随手的编纂器
- 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;
大功乐成，利用一个元素画出太极圆动画。
END
- 发表于 2020-04-22 19:00
- 阅读 ( 1047 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章