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

Question

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

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

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

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

Answer 1

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

Peter Schmalfeldt创建了一个也可下载的演示版.