纯CSS3实现loading虚影加载效果

Javanx

发布于 2019-09-04 10:37:32

1K0

发布于 2019-09-04 10:37:32

文章被收录于专栏：web秀

原件预览图：

效果解析

从效果而言，我们主要实现下列步骤： 1、让一个圆旋转，并且是先快后慢; 2、有颜色过渡效果、并且有透明度; 3、然后就是复制上面的效果，5个，然后按时间执行动画

好了，开始我们的表演

第一步 - 一个圆旋转

css画一个圆很简单，div设置宽高，用border-radius:100%就可以轻松实现。但是实现一个圆，旋转，并且不是绕自己的圆心旋转（绕自己的圆心旋转看不出来效果）是个问题，怎么解决了？

看看我的解决方案：

<div class="shadow-box box1">
  <div class="shadow"></div>
</div>

用一个盒子，装住圆，盒子比圆大。圆最水平居中，盒子顶部，然后旋转盒子，就可以搞定圆的选择效果。

.shadow-box{
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid;
  left: 200px;
}

.shadow-box div{
  position: absolute;
  background: #1199ff;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  float: right;
  left: 50%;
  margin-left: -25px;
}
@keyframes trotate{
  /*动画开始第一帧*/
  from {
    /*transform: rotate旋转，2.4s内从0°过渡到360°*/
    transform: rotate(0deg);
  }
  /*动画结束最后一帧*/
  to {
    transform: rotate(360deg);
  }
}
.box1{
  /*动画：2.4s执行完毕，cubic-bezier贝塞尔曲线（先快后慢）*/
  animation: trotate 2.4s cubic-bezier(.23,1.02,.44,.9);
}

第二步 - 颜色过渡

颜色过渡和旋转基本一样，不过颜色并不是作用盒子，而是圆。所以，我们操作box下面的div，添加颜色过渡动画，并添加透明度。

@keyframes acolor1{
  from {
    background: #1199ff;
    opacity: 0.7;
  }
  to {
    background: #c837ed;
    opacity: 0.2;
  }
}
.box1 div{
  animation: acolor1 2.4s cubic-bezier(.23,1.02,.44,.9);
  background: #1199ff;
  opacity: 0.7;
}

第三步 - copy

<div class="loading">
  <div class="shadow-box box1">
    <div class="shadow"></div>
  </div>
  <div class="shadow-box box2">
    <div class="shadow"></div>
  </div>
  <div class="shadow-box box3">
    <div class="shadow"></div>
  </div>
  <div class="shadow-box box4">
    <div class="shadow"></div>
  </div>
  <div class="shadow-box box5">
    <div class="shadow"></div>
  </div>
</div>

我们复制5个，并用box1-box5来区分

.shadow-box{
  position: absolute;
  width: 260px;
  height: 260px;
  /* border: 1px solid; */ /*去掉边框*/
  left: 200px;
}

.shadow-box div{
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  float: right;
  left: 50%;
  margin-left: -25px;
}

/*旋转动画*/
@keyframes trotate
{
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

/*box1颜色、透明度过渡动画*/
@keyframes acolor1
{
  from {
    background: #1199ff;
    opacity: 0.7;
  }
  to {
    background: #c837ed;
    opacity: 0.2;
  }
}
@keyframes acolor2
{
  from {
    background: #46b0ff;
    opacity: 0.7;
  }
  to {
    background: #9e79db;
    opacity: 0.2;
  }
}
@keyframes acolor3
{
  from {
    background: #32bbff;
    opacity: 0.7;
  }
  to {
    background: #f577a8;
    opacity: 0.2;
  }
}
@keyframes acolor4
{
  from {
    background: #00dbc2;
    opacity: 0.7;
  }
  to {
    background: #ff745a;
    opacity: 0.2;
  }
}
@keyframes acolor5
{
  from {
    background: #00dbc2;
    opacity: 0.7;
  }
  to {
    background: #ff745a;
    opacity: 0.2;
  }
}

/*box1应用旋转动画*/
/**
* box1 2.4s
* box2 2.2s完成 延时0.6s执行
* box3 2s完成 延时1.2s执行
* ...
* 时间依次减少，动画效果也就是越来越快
* 能追上上面一个动画
*/
.box1{
  animation: trotate 2.4s 
    cubic-bezier(.23,1.02,.44,.9);
  z-index: 4;
}
.box2{
  /* 2s完成 */
  animation: trotate 2.2s 
    cubic-bezier(.23,1.02,.44,.9);
  /* 延时1.2s执行 */
  animation-delay: .6s;
  z-index: 3;
}
.box3{
  animation: trotate 2s 
    cubic-bezier(.23,1.02,.44,.9);
  animation-delay: 1.2s;
  z-index: 2;
}
.box4{
  animation: trotate 1.8s 
    cubic-bezier(.23,1.02,.44,.9);
  animation-delay: 1.8s;
  z-index: 1;
}
.box5{
  animation: trotate 1.6s 
    cubic-bezier(.23,1.02,.44,.9);
  animation-delay: 2.4s;
  z-index: 1;
}
/*box1应用颜色、透明度过渡动画*/
.box1 div{
  animation: acolor1 2.4s 
    cubic-bezier(.23,1.02,.44,.9);
  background: #1199ff;
  opacity: 0.7;
}
.box2 div{
  animation: acolor2 2.2s 
    cubic-bezier(.23,1.02,.44,.9);
  animation-delay: .6s;
  background: #46b0ff;
  opacity: 0.7;
}
.box3 div{
  animation: acolor3 2s 
    cubic-bezier(.23,1.02,.44,.9);
  animation-delay: 1.2s;
  background: #32bbff;
  opacity: 0.7;
}
.box4 div{
  animation: acolor4 1.8s 
    cubic-bezier(.23,1.02,.44,.9);
  animation-delay: 1.8s;
  background: #00dbc2;
  opacity: 0.7;
}
.box5 div{
  animation: acolor4 1.6s 
    cubic-bezier(.23,1.02,.44,.9);
  animation-delay: 2.4s;
  background: #00dbc2;
  opacity: 0.7;
}

最终效果预览：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年1月6日，如有侵权请联系 cloudcommunity@tencent.com 删除

css