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

PetitQ 其他代码 2019-1-21 1.92K 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 进度条特效

已有 481 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

发表回复取消回复

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

流年似水

今日已经过去0小时

这周已经过去0天

本月已经过去0天

今年已经过去0个月

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

原版主题 6 年前 5.75K

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

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

原版主题 8 年前 1.42W

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

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

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

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

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

原版主题 10 年前 2.85W

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

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

原版主题 5 年前 4.19K

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

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

今日签到

连续签到

onlisai

54分钟前

96
Canice

16小时前

296
shboxy

20小时前

569
S.

3天前

70
麦笛

3天前

665

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

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

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

其他代码

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

HTML 结构

CSS 样式

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

相关文章

纯CSS响应式六边形网格布局

纯CSS3单个DIV元素实现加载动画

jquery多国语言切换特效

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复