欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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的方式,即渐入渐出的。但我们需要的是立即消失,所以需要用到这个。
结果:
CSS:一个简单的loading动画