CSS:一个简单的loading动画
程序员文章站
2022-06-11 18:09:20
...
<div id="circle"></div>
<div id="inner">
<div id="spiner"></div>
<div id="filler"></div>
<div id="masker"></div>
</div>
#inner {
position: absolute;
left: 24px;
top: 24px;
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}
#circle {
position: absolute;
width: 120px;
height: 120px;
background-color: transparent;
border-radius: 50%;
border: 5px solid orange;
border-left: 5px solid transparent;
}
#filler,#spiner {
position: absolute;
width: 50px;
height: 100px;
background-color: blue;
border-radius: 50px 0 0 50px;
}
#spiner {
background-color: green;
}
#masker {
position: absolute;
left: 50px;
width: 50px;
height: 100px;
background-color: orange;
border-radius: 0 50px 50px 0px;
}
#spiner {
background-color: blue;
}
@keyframes outer {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes spin {
0% {transform: rotate(360deg)}
100% {transform: rotate(0deg)}
}
@keyframes second-half-show {
0% {opacity: 0}
50%, 100% {opacity: 1}
}
@keyframes second-half-hide {
0% {opacity: 1;}
50%, 100% {opacity: 0;}
}
#spiner {
transform-origin: right center;
animation: spin .8s infinite linear;
}
#filler {
animation: second-half-hide .8s steps(1, end) infinite;
}
#masker {
animation: second-half-show .8s steps(1, end) infinite;
}
#circle {
animation: spin .8s infinite linear;
}
steps(1,end)
1表示时间间隔,end表示动画结束。
由于动画的结束是ease的方式,即渐入渐出的。但我们需要的是立即消失,所以需要用到这个。
结果:
上一篇: CSS3-制作一个简单的动画