我如何使用CSS和JavaScript编写这个真棒发光的边框效果？ [英] How can I code this awesome glowing border effect with CSS and JavaScript?

问题描述

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

This form has an awesome effect when you focus on one of its fields:

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

任何有关如何重新创建的线索？下面是我的一些意见：

Any clues on how I can recreate this? Here are a few of my observations:

• 我看到他们有一个巨大的多彩
  图片：
  http://labs.dragoninteractive.com/panel/demo/lib /img/form/map/rmap.jpg


• 当您专注于表单时，颜色似乎淡入（并在模糊处消失）


• 我不知道他们是如何使用他们的源图像获得软边缘（辉光）


• 我不知道他们如何平移彩色图像边界无限地


• 标记似乎很乱;


• 这一个<

• I see they have a giant colorful image here: http://labs.dragoninteractive.com/panel/demo/lib/img/form/map/rmap.jpg
• When you focus on the form the color seems to fade in (and fades away on blur)
• I don't know how they are getting the soft edge (glow) using the source image they have
• I don't know how they are panning the colorful image across the border infinitely
• The markup seems pretty messy; ideally I'd want a simpler solution than what they have
• This one is a clone made all with CSS3, but I don't like how the outer glow doesn't stay uniform

推荐答案

颜色变化动作发生在rmap.jpg（非常大的彩色图像）的位置是动画。有一个.png与alpha透明度，作为哑光rmap.jpg，创建漂亮的柔和的颜色过渡。动画是使用jQuery处理的。

The color changing action occurs as the position of rmap.jpg (the very large colorful image) is animated. There is an .png with alpha-transparencies which acts as matte over rmap.jpg, creating the nice soft color transition. The animation is handled using jQuery.

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

Peter Schmalfeldt created a demo which is also downloadable.

这篇关于我如何使用CSS和JavaScript编写这个真棒发光的边框效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！