拋開顏色不看 ，只是這種排版做得到嗎？
1 回答
DIEA
TA貢獻1820條經驗 獲得超2個贊
用了SCSS來寫，如果不太熟悉的話，可以看CSS。話不多說，直接上代碼
index.html
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
loading.scss
// 線條總數
$total: 13;
// 每個線條相差的角度
$angel: 180/($total - 1);
.loading {
background: black;
width: 400px;
height: 400px;
position: relative;
div {
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 div {
position: absolute;
display: block;
width: 100%;
height: 2px;
top: 50%;
transform-origin: 50% 50%;
}
.loading div:before {
display: block;
content: "";
height: 100%;
width: 10%;
background: white;
}
.loading div:nth-child(1) {
transform: translate3d(0, -50%, 0) rotate(0deg);
opacity: 0.26154;
}
.loading div:nth-child(2) {
transform: translate3d(0, -50%, 0) rotate(15deg);
opacity: 0.32308;
}
.loading div:nth-child(3) {
transform: translate3d(0, -50%, 0) rotate(30deg);
opacity: 0.38462;
}
.loading div:nth-child(4) {
transform: translate3d(0, -50%, 0) rotate(45deg);
opacity: 0.44615;
}
.loading div:nth-child(5) {
transform: translate3d(0, -50%, 0) rotate(60deg);
opacity: 0.50769;
}
.loading div:nth-child(6) {
transform: translate3d(0, -50%, 0) rotate(75deg);
opacity: 0.56923;
}
.loading div:nth-child(7) {
transform: translate3d(0, -50%, 0) rotate(90deg);
opacity: 0.63077;
}
.loading div:nth-child(8) {
transform: translate3d(0, -50%, 0) rotate(105deg);
opacity: 0.69231;
}
.loading div:nth-child(9) {
transform: translate3d(0, -50%, 0) rotate(120deg);
opacity: 0.75385;
}
.loading div:nth-child(10) {
transform: translate3d(0, -50%, 0) rotate(135deg);
opacity: 0.81538;
}
.loading div:nth-child(11) {
transform: translate3d(0, -50%, 0) rotate(150deg);
opacity: 0.87692;
}
.loading div:nth-child(12) {
transform: translate3d(0, -50%, 0) rotate(165deg);
opacity: 0.93846;
}
.loading div:nth-child(13) {
transform: translate3d(0, -50%, 0) rotate(180deg);
opacity: 1;
}
- 1 回答
- 0 關注
- 1560 瀏覽
添加回答
舉報
0/150
提交
取消