如何使用 CSS 和 JavaScript 编写这种令人惊叹的发光边框效果？

当您专注于其中一个字段时，此表单会产生令人惊叹的效果：

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

关于如何重新创建这个的任何线索？以下是我的一些观察：

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

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

彼得·施马尔费尔特 http://www.manifestinteractive.com/创建了一个demo http://www.manifestinteractive.com/usenet/login/这也是可下载 http://www.manifestinteractive.com/usenet/login.zip.