CSS3表单输入发光特效

image

以下是详细实现步骤：

第一步：

搭建结构，外层一个div，嵌套内部两个表单标签input，实际应用的时候可以在外层再嵌套一个form标签。

代码如下:

第二步：

书写静态CSS样式，注意背景颜色和表单元素配色和谐，给input添加统一的渐变背景色和边框。

代码如下：

这一步已经实现了表单的默认效果，如下图所示：

image

第三步：

最后一步，给表单添加输入时的发光效果。

设置type类型为text的input得到焦点，即focus的样式为亮度较高的颜色为投影并设置为动画，动画修改投影的不透明度，实现闪烁。
设置type类型为submit的input鼠标移上hover的时候，修改边框的颜色。

代码如下：

最后

完整版代码如下，需要的打包走哈~~~

作者：AriesMiki
链接：https://www.jianshu.com/p/d1c9d279a2c4
来源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。