纯CSS打造酷炫霓虹灯loading bar特效相关知识点HTMLCSS

53 阅读 0 评论 35 点赞

我是靠谱客的博主阳光发箍，最近开发中收集的这篇文章主要介绍纯CSS打造酷炫霓虹灯loading bar特效相关知识点HTMLCSS，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本篇文章我们要来实现一个酷炫的霓虹灯特效的加载条loading bar的特效，如下图所示：

可以看到，这个loading bar的周围有霓虹灯一样的朦胧美感，而且底部还有一个倒影，这是怎么做到的呢？

HTML

页面结构很简单，就一个div即可

<div class="loading-bar"></div>

CSS

.loading-bar

首先根据上面的分析，我们先来实现一下渐变色，由于要用::before伪元素绝对定位到.loading-bar中作为背景，所以首先要给.loading-bar设置成position: relative

.loading-bar {position: relative;width: 500px;height: 30px;background-color: white;border-radius: 12px;
}

使用伪元素实现渐变色背景和霓虹灯特效

然后添加两个伪元素::before和::after，它们的样式是一模一样的，只是让::after多了一个filter: blur(10px)实现霓虹灯的一个特效

.loading-bar::before {content: "";position: absolute;inset: 0;/* 默认角度是从上到下，90deg 逆时针旋转后变成从左到右渐变 */background: linear-gradient(90deg,var(--gradient-color-1),var(--gradient-color-2),var(--gradient-color-3),var(--gradient-color-4),var(--gradient-color-1),var(--gradient-color-2),var(--gradient-color-3),var(--gradient-color-4),var(--gradient-color-1));background-size: 200%;border-radius: 12px;
}
/* 使用一个和 ::before 相同的 作为霓虹灯特效 */
.loading-bar::after {content: "";position: absolute;inset: 0;background: linear-gradient(90deg,var(--gradient-color-1),var(--gradient-color-2),var(--gradient-color-3),var(--gradient-color-4),var(--gradient-color-1),var(--gradient-color-2),var(--gradient-color-3),var(--gradient-color-4),var(--gradient-color-1));background-size: 200%;filter: blur(10px);border-radius: 12px;
}

这里渐变色使用css变量的方式定义后使用，不然直接把颜色的十六进制写进去可读性太低了

:root {--gradient-color-1: #b983ff;--gradient-color-2: #94b3fd;--gradient-color-3: #94daff;--gradient-color-4: #99feff;
}

这时候的效果如下：

怎么样，是不是已经有霓虹灯内味儿了？

添加倒影

只需要给.loading-bar添加上-webkit-box-reflect样式即可

.loading-bar {position: relative;width: 500px;height: 30px;background-color: white;border-radius: 12px;
+ -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

效果如下：

该样式有兼容性问题，不建议在生产环境使用该样式，这里只是为了方便而使用

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -webkit-box-reflect CSS property lets you reflect the content of an element in one specific direction.

@keyframes定义并使用流动动画

要让loading bar动起来，就需要定义一个动画，我们可以通过改变background-position，也就是背景的位置来实现流动的效果

动画关键帧的定义如下

@keyframes flow {0% {background-position: 0 0;}0% {background-position: 200% 0;}
}

然后分别给两个伪元素应用该动画即可

.loading-bar::before {content: "";position: absolute;inset: 0;/* 默认角度是从上到下，90deg 逆时针旋转后变成从左到右渐变 */background: linear-gradient(90deg,var(--gradient-color-1),var(--gradient-color-2),var(--gradient-color-3),var(--gradient-color-4),var(--gradient-color-1),var(--gradient-color-2),var(--gradient-color-3),var(--gradient-color-4),var(--gradient-color-1));background-size: 200%;border-radius: 12px;
+ animation: flow 3s linear infinite;
}
/* 使用一个和 ::before 相同的 作为霓虹灯特效 */
.loading-bar::after {content: "";position: absolute;inset: 0;background: linear-gradient(90deg,var(--gradient-color-1),var(--gradient-color-2),var(--gradient-color-3),var(--gradient-color-4),var(--gradient-color-1),var(--gradient-color-2),var(--gradient-color-3),var(--gradient-color-4),var(--gradient-color-1));background-size: 200%;filter: blur(10px);border-radius: 12px;
+ animation: flow 3s linear infinite;
}

现在的效果就和开头的展示一样啦，是不是很酷炫呢！