CSS3能写出这种环状吗，不是环形进度条？

Question

抛开颜色不看 ，只是这种排版做得到吗？

Answer 1

用了SCSS来写，如果不太熟悉的话，可以看CSS。话不多说，直接上代码index.html<div class="loading">&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div></div>loading.scss// 线条总数$total: 13;// 每个线条相差的角度$angel: 180/($total - 1);.loading {&nbsp; &nbsp; background: black;&nbsp; &nbsp; width: 400px;&nbsp; &nbsp; height: 400px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; div {&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; height: 2px;&nbsp; &nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; &nbsp; transform-origin: 50% 50%;&nbsp; &nbsp; &nbsp; &nbsp; &:before {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 10%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: white;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @for $i from 1 through $total {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &:nth-child(#{$i}) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(#{$angel*($i - 1)}deg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0.2 + 0.8 * $i / $total;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}loading.css.loading {&nbsp; &nbsp; background: black;&nbsp; &nbsp; width: 400px;&nbsp; &nbsp; height: 400px;&nbsp; &nbsp; position: relative;}.loading div {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 2px;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; transform-origin: 50% 50%;}.loading div:before {&nbsp; &nbsp; display: block;&nbsp; &nbsp; content: "";&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 10%;&nbsp; &nbsp; background: white;}.loading div:nth-child(1) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(0deg);&nbsp; &nbsp; opacity: 0.26154;}.loading div:nth-child(2) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(15deg);&nbsp; &nbsp; opacity: 0.32308;}.loading div:nth-child(3) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(30deg);&nbsp; &nbsp; opacity: 0.38462;}.loading div:nth-child(4) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(45deg);&nbsp; &nbsp; opacity: 0.44615;}.loading div:nth-child(5) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(60deg);&nbsp; &nbsp; opacity: 0.50769;}.loading div:nth-child(6) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(75deg);&nbsp; &nbsp; opacity: 0.56923;}.loading div:nth-child(7) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(90deg);&nbsp; &nbsp; opacity: 0.63077;}.loading div:nth-child(8) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(105deg);&nbsp; &nbsp; opacity: 0.69231;}.loading div:nth-child(9) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(120deg);&nbsp; &nbsp; opacity: 0.75385;}.loading div:nth-child(10) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(135deg);&nbsp; &nbsp; opacity: 0.81538;}.loading div:nth-child(11) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(150deg);&nbsp; &nbsp; opacity: 0.87692;}.loading div:nth-child(12) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(165deg);&nbsp; &nbsp; opacity: 0.93846;}.loading div:nth-child(13) {&nbsp; &nbsp; transform: translate3d(0, -50%, 0) rotate(180deg);&nbsp; &nbsp; opacity: 1;}