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

PetitQ 其他代码 2019-1-21 1.87K 0 0

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

HTML 结构

这组霓虹灯特效的 HTML 结构非常简单。都是通过嵌套

也想出现在这里？联系我们吧

来组成进度条。

```
<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 效果。在这个进度条包裹元素中所有的

元素都被添加了 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;
```
```
  }
```
```
}
```

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

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

已有 467 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

也想出现在这里？联系我们吧

纯CSS3带动画特效的精美3D大按钮

CSS3炫酷3D浮雕质感文字动画特效

HTML编码解码JavaScript工具类

其他代码 6 年前 2.06K
Bootstrap超酷进度条动画UI设计

其他代码 6 年前 1.83K
基于vuejs的鼠标悬停动物显示和隐藏动画特效

其他代码 5 年前 2.30K

发表回复取消回复

要发表评论，您必须先登录。

流年似水

今日已经过去0小时

这周已经过去0天

本月已经过去0天

今年已经过去0个月

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

原版主题 6 年前 5.66K

Mac - 全屏摄影艺术相册展示模板WordPress主题，该主题适合那些从事摄影，绘画或数字图形艺术家…

VideoPro - 专业视频网站电影网站WordPress主题

原版主题 8 年前 1.41W

VideoPro是最强大的视频网站WordPress主题。基于市场上最大的视频True Mag主题，Vi…

Elessi - AJAX电商网站模板WordPress主题

原版主题 5 年前 4.09K

可以使用Option Framework轻松定制Elessi，它具有通过SMOF强大的主题选项面板。该主…

Bronx - 时尚服饰购物商城网站WordPress主题

原版主题, 汉化主题 8 年前 7.51K

Bronx WordPress深度汉化版是一款独特的Wordpress电商主题。自适应，Retina 支…

DUX-PRO创客云开发版WordPerss中文主题

原版主题 10 年前 2.85W

DUX-PRO创客科技美化专业版WordPerss主题企业博客模板，此模板为创客独家二次开发，HTML5…

点击签到领取积分可下载全站资源！

今日签到

连续签到

z1988

5小时前

70
Canice

6小时前

266
onlisai

6小时前

65
shboxy

7小时前

540
广州蚁运达

9小时前

328

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

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

HTML 结构

CSS 样式

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

相关文章

HTML编码解码JavaScript工具类

Bootstrap超酷进度条动画UI设计

基于vuejs的鼠标悬停动物显示和隐藏动画特效

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复