纯CSS3霓虹灯风格Loading进度条特效

这是一款使用纯CSS3制作的效果非常酷的霓虹灯风格Loading进度条特效。该进度条特效有5种效果。它通过CSS3的阴影及色彩的控制制作出效果非常炫酷的霓虹灯特效。

制作方法

HTML结构

这组霓虹灯特效的HTML结构非常简单。都是通过嵌套<div>来组成进度条。

<div class="loader1">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="loader2">
  <div></div>
</div>

<div class="loader3">
  <div></div>
  <div></div>
  <div></div>
</div>


<div class="loader4">
  <div>Loading</div>
</div>

<div class="loader5">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>  
</div>             
              

CSS样式

在第一种霓虹灯进度条效果中，三个不同颜色的圆形依次发亮和熄灭，形成loading效果。在这个进度条包裹元素中所有的<div>元素都被添加了fade淡入淡出动画。并使用border-radius: 50%;将它们制作为圆形。

.loader1 div {
  animation: 3s fade infinite ease-in-out;
  animation-fill-mode: backwards;
  border-radius: 50%;
  height: 3em;
  float: left;
  margin: 1em;
  opacity: 1;
  width: 3em;
}               
              

接着使用nth-child选择器来为各个圆形设置不同的颜色，动画延迟时间和阴影效果。

.loader1 div:nth-child(1) {
  animation-delay: 0.5s;
  background: #ec0aac;
  box-shadow: 0 0 1em rgba(236, 10, 172, 0.8), 
              0 0 1.8em rgba(236, 10, 172, 0.6), 
              inset 0 0 0.2em #590441;
}
.loader1 div:nth-child(2) {
  animation-delay: 1s;
  background: #7f43d7;
  box-shadow: 0 0 1em rgba(127, 67, 215, 0.8), 
              0 0 1.8em rgba(127, 67, 215, 0.6), 
              inset 0 0 0.2em #39176a;
}
.loader1 div:nth-child(3) {
  animation-delay: 1.5s;
  background: #0d8fdb;
  box-shadow: 0 0 1em rgba(13, 143, 219, 0.8), 
              0 0 1.8em rgba(13, 143, 219, 0.6), 
              inset 0 0 0.2em #04314b;
}                
              

在fade动画中只是简单的控制元素的透明度动画。

@keyframes fade {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}                
              

其它效果的制作方法请参考下载文件。