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

当您关注其中一个字段时，此表单会产生令人敬畏的效果：

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

• 我看到他们有一个巨大的彩色 图片如下：
• 当你聚焦在窗体上时，颜色似乎会淡入（并在模糊时淡出）
• 我不知道他们是如何得到软边（辉光）使用他们的源图像
• 我不知道他们是如何将彩色图像无限地平移过边界的
• 加价看起来相当混乱；理想情况下，我希望有一个比他们更简单的解决方案
• 这是一个完全用CSS3制作的克隆，但我不喜欢外部光晕如何不保持一致

---

当rmap.jpg（超大彩色图像）的位置设置动画时，会发生颜色更改操作。有一个带有alpha透明胶片的.png，它在rmap.jpg上充当蒙版，创建了漂亮的柔和颜色过渡。动画是使用jQuery处理的

---

创建了一个

您看到的软边实际上是一个透明图像，名为

content gradient.png

，位于

标记内

因此，在这个PNG的下面是一个巨大的彩色图像，它创造了一种柔和发光边缘的错觉

如果您有带Firebug的Google Chrome或Firefox，您可以“检查”DOM以了解其工作原理。您会注意到彩色图像的背景位置在运行时被更改，这可以通过jQuery或其他Javascript库使用循环来完成

---

资源可能是处理逻辑的工具。

很酷的效果，但是：

*免责声明：这是一个CSS3技术演示，而不是最佳实践教程。

@Ibu:当我打开该页面时，我看到4%的CPU负载。我的电脑速度相当快，但这真的是个问题吗？为了减少资源，他们可以轻松地使用较小的图像，因为不需要3000x900图像。定义“大量流程资源”。计算机是用来使用的；没有理由害怕CPU的使用，只要它没有垄断或限制你的设备。哈哈，你绝对是对的@Jordan。因为你有一台速度很快的电脑是的，我不想在这篇非常有趣的文章中添加无用的内容。与其试图争论，也许你应该问问自己，为什么制作css教程的人会在他们的网站上写这篇文章。你不这么认为吗？现在祝你早安：）@Ibu：不，我不这么认为。我认为，当某件事情的措辞像“最佳实践”一样强烈时，应该对其进行审查和解释，而不是只是漫无目的地传播和接受。我不知道KaylaRose是一个多么强大的开发者，所以我不会仅仅因为KaylaRose这么说就接受一个人的话。我的观点仍然是：解释为什么这不是最佳实践，并为你的解释提供证据。如果有什么区别的话，你应该说，当你只想让某人填写你非常重要的表单时，仅仅为了分散用户界面的注意力是不好的做法。PHP是服务器端的：它不能在客户端上运行循环。此外，jQuery不是一种语言：它是一个库。