高防服务器

怎么用纯CSS实现类似脉动的loader


怎么用纯CSS实现类似脉动的loader

发布时间:2022-02-28 15:37:32 来源:高防服务器网 阅读:89 作者:小新 栏目:web开发

这篇文章将为大家详细讲解有关怎么用纯CSS实现类似脉动的loader,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

  代码解读

  定义dom,容器中包含10个子元素:

  <divclass="loader">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  </div>

  居中显示:

  body{

  margin:0;

  height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  background:linear-gradient(#eee70%,pink);

  }

  设置容器的样式,是粉色背景并描边的一个圆:

  .loader{

  width:6em;

  height:6em;

  padding:3em;

  font-size:10px;

  background-color:pink;

  border-radius:50%;

  border:0.8emsolidhotpink;

  }

  设置子元素的布局方式为横向平铺:

  .loader{

  display:flex;

  align-items:center;

  justify-content:space-between;

  }

  设置子元素的样式:

  .loader>span{

  width:0.5em;

  height:50%;

  background-color:deeppink;

  }

  增加子元素的动画效果:

  .loader>span{

  transform:scaleY(0.05)translateX(-0.5em);

  animation:span-animate1.5sinfiniteease-in-out;

  }

  @keyframesspan-animate{

  0%,100%{

  transform:scaleY(0.05)translateX(-0.5em);

  }

  15%{

  transform:scaleY(1.2)translateX(1em);

  }

  90%,100%{

  background-color:hotpink;

  }

  }

  设置子元素下标,让子元素依次播放动画:

  .loader>span{

  animation-delay:calc(var(–n)*0.05s);

  }

  .loader>span:nth-child(1){–n:1;}

  .loader>span:nth-child(2){–n:2;}

  .loader>span:nth-child(3){–n:3;}

  .loader>span:nth-child(4){–n:4;}

  .loader>span:nth-child(5){–n:5;}

  .loader>span:nth-child(6){–n:6;}

  .loader>span:nth-child(7){–n:7;}

  .loader>span:nth-child(8){–n:8;}

  .loader>span:nth-child(9){–n:9;}

  .loader>span:nth-child(10){–n:10;}

  增加容器动画,加强脉动的效果:

  .loader{

  animation:loader-animate1.5sinfiniteease-in-out;

  }

  @keyframesloader-animate{

  45%,55%{

  transform:scale(1.05);

  }

  }

关于“怎么用纯CSS实现类似脉动的loader”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[