这种发光效果是否可能实现？

Question

看到这个dribbble截图后：

https://dribbble.com/shots/665300-Progress-bar

我很想知道是否有可能重新创建发光效果。最好的情况是它可以动态地工作，甚至会闪烁等。

这可能可以通过某种静态半透明的光晕来实现，但我想知道那样是否看起来好看。

如何尝试使其工作？纯CSS还是完全不同的东西？当然，它需要在多个浏览器中正常运行。

- Stephan-v

---

我猜纯CSS不能实现这个，但你可以使用图片来实现。 - Jon Snow

我相信你可以使用一系列的盒子阴影来创建类似的效果，但这可能会影响性能。因此，我建议使用PNG精灵。 - agrm

那个发光/闪光的东西怎么样？ - Jon Snow

明天我要试一下。先尝试使用纯CSS，看看情况如何。 - Stephan-v

Answer 1

假设你指的是镜头耀斑效果，我个人会使用PNG格式。

<div class="progress">
  <div class="progress-bar" style="width: 69%;"></div>
</div>

你可以在CSS中使用.progress .progress-bar:after，添加一个发光/镜头耀斑的背景图片，由于它被隔离在一个:after选择器中，因此可以独立进行动画（闪烁、脉冲等）。

如果还没有，请查看Bootstrap中的进度条组件，因为它们有一个相当广泛的样式和变化集来开始使用。 资源:

• Progress Bars: Striped

- bluemwhitew