久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術(shù)文章
文章詳情頁

html - CSS3能寫出這種環(huán)狀嗎,不是環(huán)形進(jìn)度條?

瀏覽:130日期:2023-01-07 18:46:58

問題描述

html - CSS3能寫出這種環(huán)狀嗎,不是環(huán)形進(jìn)度條?

拋開顏色不看 ,只是這種排版做得到嗎?

問題解答

回答1:

效果圖:html - CSS3能寫出這種環(huán)狀嗎,不是環(huán)形進(jìn)度條?

用了SCSS來寫,如果不太熟悉的話,可以看CSS。話不多說,直接上代碼

index.html

<p class='loading'> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p></p>

loading.scss

// 線條總數(shù)$total: 13;// 每個(gè)線條相差的角度$angel: 180/($total - 1);.loading { background: black; width: 400px; height: 400px; position: relative; p {position: absolute;display: block;width: 100%;height: 2px;top: 50%;transform-origin: 50% 50%;&:before { display: block; content: ''; height: 100%; width: 10%; background: white;}@for $i from 1 through $total { &:nth-child(#{$i}) {transform: translate3d(0, -50%, 0) rotate(#{$angel*($i - 1)}deg);opacity: 0.2 + 0.8 * $i / $total; }} }}

loading.css

.loading { background: black; width: 400px; height: 400px; position: relative;}.loading p { position: absolute; display: block; width: 100%; height: 2px; top: 50%; transform-origin: 50% 50%;}.loading p:before { display: block; content: ''; height: 100%; width: 10%; background: white;}.loading p:nth-child(1) { transform: translate3d(0, -50%, 0) rotate(0deg); opacity: 0.26154;}.loading p:nth-child(2) { transform: translate3d(0, -50%, 0) rotate(15deg); opacity: 0.32308;}.loading p:nth-child(3) { transform: translate3d(0, -50%, 0) rotate(30deg); opacity: 0.38462;}.loading p:nth-child(4) { transform: translate3d(0, -50%, 0) rotate(45deg); opacity: 0.44615;}.loading p:nth-child(5) { transform: translate3d(0, -50%, 0) rotate(60deg); opacity: 0.50769;}.loading p:nth-child(6) { transform: translate3d(0, -50%, 0) rotate(75deg); opacity: 0.56923;}.loading p:nth-child(7) { transform: translate3d(0, -50%, 0) rotate(90deg); opacity: 0.63077;}.loading p:nth-child(8) { transform: translate3d(0, -50%, 0) rotate(105deg); opacity: 0.69231;}.loading p:nth-child(9) { transform: translate3d(0, -50%, 0) rotate(120deg); opacity: 0.75385;}.loading p:nth-child(10) { transform: translate3d(0, -50%, 0) rotate(135deg); opacity: 0.81538;}.loading p:nth-child(11) { transform: translate3d(0, -50%, 0) rotate(150deg); opacity: 0.87692;}.loading p:nth-child(12) { transform: translate3d(0, -50%, 0) rotate(165deg); opacity: 0.93846;}.loading p:nth-child(13) { transform: translate3d(0, -50%, 0) rotate(180deg); opacity: 1;}回答2:

svg應(yīng)該可以

回答3:

可以啊...每一個(gè)點(diǎn)都是一個(gè)元素 定位 旋轉(zhuǎn) 顏色都可以符合

回答4:

完全可以!你是不是不知道旋轉(zhuǎn)?

回答5:

CSS3 的rotate,旋轉(zhuǎn)角度,還有h5的canvas和svg

回答6:

svg 和 canvas

標(biāo)簽: HTML
主站蜘蛛池模板: 石城县| 禹州市| 恩施市| 永定县| 游戏| 孟村| 太仆寺旗| 三明市| 东辽县| 阿克苏市| 隆德县| 永城市| 都安| 乐业县| 江源县| 响水县| 宣威市| 和平区| 浦城县| 许昌市| 莱州市| 百色市| 定日县| 绥德县| 英吉沙县| 石嘴山市| 江城| 黄陵县| 井冈山市| 溧阳市| 鸡东县| 固安县| 白河县| 连州市| 平度市| 民乐县| 霞浦县| 潞西市| 潢川县| 德钦县| 赤城县|