caoruiy‘s blog

Wisdom outweighs any wealth

纯css3实现loading加载图(原理解析+多枚示例)

在传统的loading图中,实现方式往往是gif图片。

使用css3的最大好处就是减少了资源开销,加载一张图片和在css文件中多增加几行代码的差别是不需要过多说明的。

但是,当我想写下这篇文章的时候,发现这个东西网上一大堆,完全没有必要再多发一篇没有意义的文字🤣🤣🤣,所以转念一想还是改成总结汇总形式的短文好了。

原理

首先从一个例子开始:

如果无法显示DEMO,可以点此链接查看:http://runjs.cn/detail/vd804ese

示例中的样式来自网易的一个页面,又偷偷摸摸的偷了别人的东西😳


在例子中,我们使用多个相同的div元素,并给每个div元素设置相同的动画效果,于此同时,为每一个元素设置动画延迟和不同角度的旋转,从而达到模拟loading图片的效果。

如果你理解了这样的实现原理,下面的所有内容就没有必要再看了,因为这篇文章本身存在的价值,就比较小,也比较简单。

<div class="div">
  <div class="sk-circle">
    <div class="sk-circle1 sk-child"></div>
    <div class="sk-circle2 sk-child"></div>
    <div class="sk-circle3 sk-child"></div>
    <div class="sk-circle4 sk-child"></div>
    <div class="sk-circle5 sk-child"></div>
    <div class="sk-circle6 sk-child"></div>
    <div class="sk-circle7 sk-child"></div>
    <div class="sk-circle8 sk-child"></div>
    <div class="sk-circle9 sk-child"></div>
    <div class="sk-circle10 sk-child"></div>
    <div class="sk-circle11 sk-child"></div>
    <div class="sk-circle12 sk-child"></div>
  </div>
</div>

基本的css:

.div{
  top:100px;
  left:100px;
  background:#000;
  }
  .sk-circle {
  width: 44px;
  height: 44px;
  position: relative;
  }

给每一个元素sk-circle1 sk-child设置动画:

.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  }
  .sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #ffffff;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  }
  @-webkit-keyframes sk-circleBounceDelay{
    0%,80%,to{
      -webkit-transform:scale(0);
      transform:scale(0)
    }
    40%{
      -webkit-transform:scale(1);
      transform:scale(1)
    }
  }
  @keyframes sk-circleBounceDelay{
    0%,80%,to{
      -webkit-transform:scale(0);
      transform:scale(0)
    }
    40%{
      -webkit-transform:scale(1);
      transform:scale(1)
      }
  }

为了形成loading的效果,给每一个元素设置延时和旋转:

.sk-circle .sk-child:nth-child(0){
  transform : rotate(0deg);}
  .sk-circle .sk-child:nth-child(1){
  transform : rotate(30deg);
  }
  .sk-circle .sk-child:nth-child(2){
  transform : rotate(60deg);
  }
  .sk-circle .sk-child:nth-child(3){
  transform : rotate(90deg);
  }
  .sk-circle .sk-child:nth-child(4){
  transform : rotate(120deg);
  }
  .sk-circle .sk-child:nth-child(5){
  transform : rotate(150deg);
  }
  .sk-circle .sk-child:nth-child(6){
  transform : rotate(180deg);
  }
  .sk-circle .sk-child:nth-child(7){
  transform : rotate(210deg);
  }
  .sk-circle .sk-child:nth-child(8){
  transform : rotate(240deg);
  }
  .sk-circle .sk-child:nth-child(9){
  transform : rotate(270deg);
  }
  .sk-circle .sk-child:nth-child(10){
  transform : rotate(300deg);
  }
  .sk-circle .sk-child:nth-child(11){
  transform : rotate(330deg);
  }
  .sk-circle .sk-child:nth-child(12){
  transform : rotate(360deg);
  }
  .sk-circle .sk-child:nth-child(0):before{ 
    animation-delay : 0s;
  }
  .sk-circle .sk-child:nth-child(1):before{  
    animation-delay : 0.1s;
  }
  .sk-circle .sk-child:nth-child(2):before{  
    animation-delay : 0.2s;
  }
  .sk-circle .sk-child:nth-child(3):before{
  animation-delay : 0.3s;
  }
  .sk-circle .sk-child:nth-child(4):before{
  animation-delay : 0.4s;
  }
  .sk-circle .sk-child:nth-child(5):before{
  animation-delay : 0.5s;
  }
  .sk-circle .sk-child:nth-child(6):before{
  animation-delay : 0.6s;
  }
  .sk-circle .sk-child:nth-child(7):before{
  animation-delay : 0.7s;
  }
  .sk-circle .sk-child:nth-child(8):before{
  animation-delay : 0.8s;
  }
  .sk-circle .sk-child:nth-child(9):before{
  animation-delay : 0.9s;
  }
  .sk-circle .sk-child:nth-child(10):before{
  animation-delay : 1.0s;
  }
  .sk-circle .sk-child:nth-child(11):before{
  animation-delay : 1.1s;
  }
  .sk-circle .sk-child:nth-child(12):before{
  animation-delay : 1.2s;
  }

所有的示例基本上也都是这个套路,技术都是熟悉的技术,主要的是实现的创意和想法!

示例

HTML5+CSS3 最酷的 loading 效果收集
CSS3实现10种Loading效果
css3 loading素材
百度搜索:loading css3

其他文章

内容loading加载后高度变化CSS3 transition体验优化

点赞

发表评论

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