[分享]css3发光进度条

现在的Web设计已经越来越注重用户体验，如何在页面中加入一些醒目的效果，吸引用户的注视并让网站显得更加生动有趣呢？其中一种解决方案就是使用CSS3的发光进度条效果。.progressbar { : r...

现在的Web设计已经越来越注重用户体验，如何在页面中加入一些醒目的效果，吸引用户的注视并让网站显得更加生动有趣呢？其中一种解决方案就是使用CSS3的发光进度条效果。

.progress-bar {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
}

.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px;
  background-color: #ffec03;
  animation: progress 3s infinite;
}

@keyframes progress {
  0% {
    width: 0;
    opacity: 0.5;
    box-shadow: 0 0 10px #ffec03, 0 0 20px #ffec03, 0 0 30px #ffec03, 0 0 40px #ffec03;
  }
  40% {
    width: 70%;
    opacity: 0.7;
    box-shadow: none;
  }
  100% {
    width: 100%;
    opacity: 0.5;
    box-shadow: 0 0 10px #ffec03, 0 0 20px #ffec03, 0 0 30px #ffec03, 0 0 40px #ffec03;
  }
} 

上面代码中，定义了一个名为.progress-bar的div容器，设置宽度为100%、高度为20px、背景颜色为灰色、圆角半径为10px。然后，在容器上使用after伪元素，将其定位到容器左上角，高度为100%、圆角半径为10px、背景颜色为黄色。接着，使用CSS动画的@keyframes属性定义进度条的动画效果，从0%宽度为0开始，逐步变化到40%时宽度为70%，最终变化到100%宽度100%。在动画过程中，使用box-shadow属性实现了发光效果，增强了进度条的视觉效果。

以上就是使用CSS3实现的发光进度条效果，如果希望进一步改变效果可以调整动画中的参数，如增加动画持续时间或调整发光颜色、大小等。这种效果可以应用在网站的加载、上传等场景中，也可以作为一种CSS3新鲜特效在设计中加以运用。