问题
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:
- 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
回答1:
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 created a demo which is also downloadable.
回答2:
The soft edge that you see is actually a transparent image named content-gradient.png inside an <img/> tag.
So the big colorful image comes beneath this PNG and creates an illusion of soft glowing edges.
If you have Google Chrome or Firefox with Firebug, you can "inspect" the DOM to see how it works. You'll notice that the colorful image's background position is being changed at runtime which can be done using a loop with jQuery or another Javascript library.
The js.php?page=login resource is probably what's taking care of the logic.
来源：https://stackoverflow.com/questions/6165419/how-can-i-code-this-awesome-glowing-border-effect-with-css-and-javascript