CSS

纯CSS3实现loading虚影加载效果

前言

最近公司实在是太忙了,996的日子(当前时间凌晨2019-01-06 02:04),所以更新也少了,希望大家多体谅一下,在此对小伙伴们说声抱歉。

前几天接到小伙伴投稿,希望做一个类似loading的效果,也是只要手头有空就赶紧写写,今天终于给做好了,非常感谢"月球居民爱丽丝"的投稿。

原件预览图:
纯CSS3实现loading虚影加载效果

效果解析

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

好了,开始我们的表演

第一步 - 一个圆旋转

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

看看我的解决方案:

纯CSS3实现loading虚影加载效果

<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);
}

纯CSS3实现loading虚影加载效果

第二步 - 颜色过渡

颜色过渡和旋转基本一样,不过颜色并不是作用盒子,而是圆。所以,我们操作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;
}

纯CSS3实现loading虚影加载效果

第三步 - 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;
}

最终效果预览:
纯CSS3实现loading虚影加载效果

总结

还是那句“万丈高楼平地起”,要善于问题分解,一步一步来,不要想着一口一个胖子,饭的慢慢吃。按步骤是不是发现超级简单就可以搞定?

再次感谢"月球居民爱丽丝"同学,也期待更多人的投稿。

陌生人,2019年好好加油,我看好你。

(2)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

this is a cache: 0.00602