CSS3表单输入发光特效

image

以下是详细实现步骤:

第一步:

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

代码如下:



第二步:

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

代码如下:

        

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

image

第三步:

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

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

代码如下:

        

最后

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



    
        
        CSS3表单输入发光特效
        
    
    
        
    


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

你可能感兴趣的:(CSS3表单输入发光特效)