html - 创建一个加载器，其中线在中心形成一个圆圈

Question

这是我的代码

.circle {
  border: 1px solid transparent;
  border-radius: 50%;
  width: 100px;
  overflow: hidden;

}
.div7 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
}
.div6 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div1 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div2 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div3 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div4 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div5 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}



#div7 {animation-timing-function: cubic-bezier(0.6,0,1,1);}
#div6 {animation-timing-function: cubic-bezier(0.5,0,1,1);}
#div1 {animation-timing-function: cubic-bezier(0.4,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.3,0,1,1);}
#div3 {animation-timing-function: cubic-bezier(0.2,0,0.58,1);}
#div4 {animation-timing-function: cubic-bezier(0.1,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0,1,1,1);}

@keyframes mymove {
     0%{
        opacity: 0;
        left: 80%;      
    }
    50%{
        opacity: 1;
        left: 45%;

    }
    100%{
        opacity: 0;
        left: 10%;
    }
}

<div class="circle">
  <div id="div7" class="div7"></div>
  <div id="div6" class="div6"></div>
  <div id="div1" class="div1"></div>
  <div id="div2" class="div2"></div>
  <div id="div3" class="div3"></div>
  <div id="div4" class="div4"></div>
  <div id="div5" class="div5"></div>
</div>

我想设计一个有七行的装载机。

在页面加载时，我希望第一行，即底线从右侧移动并停在中心，直到第二行到达，当第二行到达中心时，现在第一行和第二行都将等待第三行，这将继续直到所有线条都居中。

现在，当所有线都居中时，它们会形成圆形格式一段时间，然后第一行，即底线将从中心移动到左侧，然后是第二行，然后是其他行。

这个过程将继续无限循环。

标签： htmlcsscss-animations

Answer 1

首先，我建议只使用一个元素来创建加载器，然后依靠它linear-gradient来创建每一行。对于动画，我们只需要调整background-size每一个；因此我们只需要一个动画。

您必须修复background-position每条线的，然后对于每个动画状态，您必须一一更改线条的背景大小。因此，对于第一个状态，它们都处于[0% 10px](width/height) 然后在下一步中最后一个变为[50% 10px]，然后我们更改第二个，依此类推。

.circle {
  border: 1px solid transparent;
  border-radius: 50%;
  width: 82px;
  height:82px;
  overflow: hidden;
  background-image:
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red);
  background-size:0% 10px;
  background-position:100% 0, 100% 12px,100% 24px,100% 36px,100% 48px,100% 60px,100% 72px;
  background-repeat:no-repeat;
  animation:animate 6s infinite cubic-bezier(0.6,0,1,1);;
}
@keyframes animate{
  0% {
    background-size:0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,0% 10px;
  }
  10% {
    background-size:0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,50% 10px;
  }
  15% {
    background-size:0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,50% 10px,50% 10px;
  }
  20% {
    background-size:0% 10px,0% 10px,0% 10px,0% 10px,50% 10px,50% 10px,50% 10px;
  }
  25% {
    background-size:0% 10px,0% 10px,0% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  30% {
    background-size:0% 10px,0% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  35% {
    background-size:0% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  40% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  45% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  50% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,100% 10px;
  }
  55% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,100% 10px,100% 10px;
  }
  60% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,100% 10px,100% 10px,100% 10px;
  }
  65% {
    background-size:50% 10px,50% 10px,50% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
  }
  70% {
    background-size:50% 10px,50% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
  }
  75% {
    background-size:50% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
  }
  80% {
    background-size:100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
  }
  100% {
    background-size:100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
    opacity:0;
  }
}

<div class="circle">

</div>