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
- 閱讀 ( 1052 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章