Как я могу кодировать этот удивительный эффект светящейся границы с помощью 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 (очень большое красочное изображение). Существует .png с альфа-прозрачностью, которая действует как матовая поверх rmap.jpg, создавая приятный мягкий цветовой переход. Анимация обрабатывается с использованием jQuery.

Питер Шмальфельдт создал демо , которое также можно загрузить .

Answer 2

Мягкий край, который вы видите, на самом деле является прозрачным изображением с именем content-gradient.png внутри тега <img/>.

Таким образом, большое красочное изображение находится под этим PNG и создает иллюзию мягких светящихся краев.

Если у вас есть Google Chrome или Firefox с Firebug, вы можете «осмотреть» DOM, чтобы увидеть, как он работает.Вы заметите, что положение фона красочного изображения изменяется во время выполнения, что можно сделать с помощью цикла с jQuery или другой библиотекой Javascript.

Ресурс js.php? Page = login это, вероятно, то, что заботится о логике.