我该如何用CSS和JavaScript来编写这种令人敬畏的发光边框效果

How can I code this awesome glowing border effect with CSS and JavaScript?

本文关键字：边框 CSS 何用 JavaScript 更新时间：2023-09-26

当你专注于它的一个字段时，这个表单有一个很棒的效果：

http://labs.dragoninteractive.com/panel/demo/

有什么线索可以让我重现这一幕吗？以下是我的一些观察结果：

我看到他们有一个巨大的彩色此处的图片：http://labs.dragoninteractive.com/panel/demo/lib/img/form/map/rmap.jpg
当你专注于表单时，颜色似乎会逐渐消失（并在模糊时逐渐消失）
我不知道他们是如何使用他们的源图像获得软边（辉光）的
我不知道他们是如何将彩色图像无限地平移过边界的
标记看起来相当混乱；理想情况下，我想要一个比他们更简单的解决方案
这是一个完全用CSS3制作的克隆，但我不喜欢外部的辉光不均匀

当rmap.jpg（非常大的彩色图像）的位置设置动画时，会发生颜色更改操作。有一个.png的阿尔法透明度，它的作用是无光泽的rmap.jpg，创造了漂亮的柔和的颜色过渡。动画是使用jQuery处理的。

Peter Schmalfeldt创建了一个演示，也可以下载。

您看到的软边实际上是<img/>标记内的一个名为content-gradient.png的透明图像。

因此，这个巨大的彩色图像出现在这个PNG下面，并产生了一种柔和发光边缘的错觉。

如果你有Google Chrome或Firefox with Firebug，你可以"检查"DOM，看看它是如何工作的。您会注意到彩色图像的背景位置在运行时发生了变化，这可以通过使用jQuery或其他Javascript库的循环来完成。

js.php？page=登录资源可能是负责处理逻辑的。