📝 代码查看
2
查看次数
2025-11-09
创建时间
2025-11-09
最后更新
<div class="loading">
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
<span class="line4"></span>
<span class="line5"></span>
<span class="line6"></span>
<span class="line7"></span>
<span class="line8"></span>
</div>.loading {
width: 80px;
height: 60px;
margin: 0 auto;
position: relative;
}
span {
width: 4px;
height: 20px;
background-color: #ccc;
position: absolute;
left: 38px;
-webkit-animation: loading 1s infinite;
}
.line1 {
background-color: #000;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-delay: .3s;
}
.line2 {
top: 5px;
left: 52px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation-delay: .4s;
}
.line3 {
top: 18px;
left: 57px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation-delay: .5s;
}
.line4 {
top: 31px;
left: 52px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-animation-delay: .6s;
}
.line5 {
top: 37px;
-webkit-animation-delay: .7s;
}
.line6 {
top: 32px;
left: 24px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-animation-delay: .8s;
}
.line7 {
top: 18px;
left: 19px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-animation-delay: .9s;
}
.line8 {
top: 5px;
left: 24px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation-delay: 1s;
}
@-webkit-keyframes loading {
0% {
background-color: #ccc;
}
50% {
background-color: #000;
}
100% {
background-color: #ccc;
}
}暂无JavaScript代码