<style>
#f{
width:500px;
height:100px;
border:1px solid green;
font-size:0;
}
#f div{
width:100px;
height:100px;
display:inline-block;
position:relative;
/* box-sizing:border-box; */
}
#f div::before{
width: 50px;
height: 50px;
content:'';
position:absolute;
left:50%;
top:50%;
margin-left:-25px;
margin-top:-25px;
box-sizing:border-box;
border:10px solid #ccc;
border-radius:50%;
animation:zqq 1s infinite linear;
}
#f div:nth-of-type(1)::before{
border-style:dotted;
}
#f div:nth-of-type(2)::before{
border-top-color:transparent;
border-bottom-color:transparent;
}
#f div:nth-of-type(3)::before{
border-top-color:transparent;
}
#f div:nth-of-type(4)::before{
border-color:transparent;
border-top-color:#ccc;
animation-direction:reverse;
}
#f div:nth-of-type(4)::after{
content:'';
width:28px;
height:28px;
position:absolute;
left:50%;
top:50%;
margin-left:-14px;
margin-top:-14px;
border:10px solid transparent;
border-top-color:#ccc;
border-radius:50%;
box-sizing:border-box;
animation:zqq 1s infinite linear;
}
#f div:nth-of-type(5)::before{
border-left-style:none;
border-top-color:transparent;
animation-direction:reverse;
}
@keyframes zqq{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div id="f">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
扫一扫
2157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
