专栏首页web秀纯CSS3实现loading虚影加载效果

纯CSS3实现loading虚影加载效果

原件预览图:

效果解析

从效果而言,我们主要实现下列步骤: 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;
}

最终效果预览:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3实现3D水晶立方体效果

    前段时间写过一篇《CSS3实现美美哒的图片倒影效果》,里面最后一步,“我们使倒影倾斜一个角度,让整个倒影效果更具有立体效果”,不知道大家有没有联想到用倾斜,我们...

    Javanx
  • CSS3萌宠系列,纯CSS3诞生的可爱狗狗

    好可爱一只小狗狗!睡觉憨憨的样子,听到细微的声音,立马竖起他的耳朵,看向远方。你是不是想拥有这样一只忠实而又可爱的狗狗呢?

    Javanx
  • Todo List: 待办事项添加描述图片等信息(file转base64存储) – 第四章

    有了前面的代码,这次添加图片附件就非常简单了,这里就写个简单的示例,后面优化样式等。

    Javanx
  • 射雕的"双飞翼布局"

    符合"渐进增强"标准+栅格理论,同时兼容性也不错,几乎没有到用hack <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

    菩提树下的杨过
  • 谈谈出入React框架踩过的坑

    1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop value ...

    外婆的彭湖湾
  • 利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码

    今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码的功能。 其实主要注意几点细节就可以轻松实现这样的功能了,第...

    林老师带你学编程
  • jQuery基础教程之选择器

    老雷PHP全栈开发
  • 事件修饰符

    章鱼喵
  • 纯CSS制作多扇区饼图和环形图

    近期在做一个小程序的时候,需要显示重要位置显示几个饼图。遇到这种情况,第一想法就是上网搜索各种小程序支持的图表控件。最终也选择了小程序版本的EChart...

    无忧无忌
  • CSS——实现元素的垂直居中

    在写CSS的过程中,我常常谷歌一个东西,就是如何实现元素的垂直居中,水平居中难度还不是很大,但是垂直居中我这个烂记性是写一次忘一次,于是本着好记性不如烂笔头的想...

    Originalee

扫码关注云+社区

领取腾讯云代金券