简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> H5 Tutorial> body text

一款带有发光动画的HTML5表单

PHP中文网
Release： 2016-05-17 09:08:47
Original
2111 people have browsed it

今天给大家秀一款带有发光动画的HTML5表单，挺酷的，效果图如下：

1011.jpg

当表单获取焦点时，表单四周就会呈现出发光动画的效果，并不断地进行颜色渐变；当表单失去焦点时，停止发光。其中颜色渐变的动画只有基于webkit的浏览器才有效果，比如chrome和safari。下面简单贴一下实现这个发光HTML5表单的CSS代码和HTML代码，如果你喜欢可以将它分享给你的朋友。

HTML代码如下：
Copy after login

CSS代码如下：

Copy after login

其中，表单焦点切换需要jquery支持，js代码如下：
Copy after login

以上就是一款带有发光动画的HTML5表单的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！


Related labels：
发光动画，HTML5，表单
source：php.cn
Previous article：HTML5 游戏开发 之 资源加载篇(2) Next article：CSS3的文字阴影—Text-Shadow
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Is it possible to add gradients to SVG paths? I want to put a simple loading indicator on my website that is triggered by a script. It s...
From 2023-10-18 14:55:02
0
2
195
Is it possible to achieve a smooth transition from text drawn in one color to an animated gradient? There is white text on the page and a button below it. Additionally, animated gradients ar...
From 2023-09-16 09:22:05
0
1
459
Is a website with just a contact us form and a link to a backend server static or dynamic? Sorry if this is not the right place to ask. I have an idea. My university website display...
From 2023-08-17 21:04:02
0
1
277
In PHP MySQL, add default POST values to dynamically created input row fields. I'm developing a small HTML form integrated with a table. There is an input field in the t...
From 2023-07-30 10:10:35
0
1
205
Find paragraphs in text. I'm trying to implement an "Edit" button using JavaScript on a Django website. A...
From 2023-07-28 13:08:03
0
1
309
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！