如何使用CSS和JavaScript编写这个令人敬畏的发光边框效果？

Question

当您专注于其中一个字段时，此表单具有非常棒的效果：

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

有关如何重新创建此内容的任何线索？以下是我的一些观察：

• 我看到他们有一个巨大的多彩 图片在这里： http://labs.dragoninteractive.com/panel/demo/lib/img/form/map/rmap.jpg
• 当你专注于表格时，颜色似乎淡入（并在模糊时消失）
• 我不知道他们是如何使用他们拥有的源图像获得柔和边缘（发光）
• 我不知道他们是如何无限地将彩色图像平移过来的
• 标记看起来很混乱;理想情况下，我想要一个比他们更简单的解决方案
• This one是一个用CSS3制作的克隆，但我不喜欢外部发光不均匀的方式

Answer 1

当rmap.jpg（非常大的彩色图像）的位置被动画化时，发生颜色改变动作。有一个带有alpha透明度的.png，它在rmap.jpg上作为遮罩，创造出漂亮的柔和色彩过渡。使用jQuery处理动画。

Peter Schmalfeldt创建的demo也是downloadable。

Answer 2

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

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

如果你有谷歌Chrome或Firefox与Firebug，你可以“检查”DOM，看看它是如何工作的。您会注意到彩色图像的背景位置在运行时会被更改，这可以使用带有jQuery或其他Javascript库的循环来完成。

js.php?page=login资源可能正在处理逻辑。