CSS3实现loading动画效果

2019-09-13 郑州网站建设  

第一步画出静态的小菊花。

.sk-fading-circle {

  width: 40px;

  height: 40px;

  position: relative;

}

.sk-fading-circle .sk-circle {

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

}

.sk-fading-circle .sk-circle:before {

  content: '';

  display: block;

  margin: 0 auto;

  width: 15%;

  height: 15%;

  background-color: #333;

  border-radius: 100%;

}

 

<div class="sk-fading-circle">

  <div class="sk-circle"></div>

  //为缩减篇幅省略中间10div

  <div class="sk-circle"></div>

</div>

 

代码如上,静态小菊花其实是一个外层div里嵌套12个小div。小div通过 border-radius画成圆型,并通过margin: 0 auto;定位到顶格居中位置。由于12个小div都是absolute定位,因此都重叠在了一起。

 

第二步将12个重叠的圆分散开。

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}

.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}

//节省篇幅,每个圆每隔30度递增旋转

.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}

 

<div class="sk-fading-circle">

  <div class="sk-circle1 sk-circle"></div>

  //为缩减篇幅省略中间10div

  <div class="sk-circle12sk-circle"></div>

</div>

 

代码如上,用transformrotate将各个圆点旋转,形成完整的菊花状。如果你对transform不熟的话,看下图,第二个圆点旋转30度的示意图,其余圆点的旋转自行脑补:

第三步通过animation控制opacity属性,让每个点淡进淡出

@-webkit-keyframes sk-circleFadeDelay {

  0%, 39%, 100% { opacity: 0; }

  40% { opacity: 1; }

}

@keyframes sk-circleFadeDelay {

  0%, 39%, 100% { opacity: 0; }

  40% { opacity: 1; }

}

.sk-fading-circle .sk-circle:before {

  ……

  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;

}

 

这样每个点都在像信号灯一样同步地闪烁。

 

最后一步,给每个点设置animation-delay延时,以错开闪烁的时间,形成常见的菊花转转的效果

 

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }

.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }

.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }

//为缩减篇幅省略中间代码

.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2127.html转载请标明出处,谢谢合作!
标签:
  • Ч
  • 静态
  • 第一
  • CSS3loading
  • 步画出
  • 菊花