14款CSS3炫酷表单input输入框美化效果【附源码】
这是一款效果非常酷的CSS3表单input输入框美化效果插件。为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验。这个CSS3表单input输入框美化插件就是一个很好的例子。这个插件中的效果大多数是使用CSS transitions来切换伪元素制作的。
HTML结构
HTML结构使用一个span
作为wrapper,包裹住input
和它的label
。为了效果能正常工作,要将label
放置在input
后面,这是在使用复选框和单选按钮时的通常做法。但这种做法不是必须的,你可以使用js来在input聚焦时动态为它添加class。在这个插件中,我们通过相邻的兄弟选择器,使用CSS的:focus伪元素来制作效果。注意,不是所有的效果都使用CSS来触发。
|
这里最有用的元素是label
。我们可以使用:before和:after伪元素来制作各种边框和背景效果,然后还可以使它们产生动画效果。我们甚至还能制作类似"Kyo"这个demo中的遮罩效果。
CSS样式
第一种效果“Haruki”,效果看起来像是我们移动了input的边框,但实际上我们移动的是label
元素的两个伪元素。
|
注意我们已经为包裹input
的span
、input
和label
添加了一些基本样式。当input
聚焦时,label
处于input
的上面,当两个伪元素动画的时候,我们将使input
中的内容往上运动。
在Firefox(Mac系统)中,文本的渲染效果不是很好,所以你可能会在动画结束时看到文本有些模糊。令人叹息的是,字体模糊不是Firefox浏览器唯一的问题,在某些过渡效果之后,它的字体渲染效果没有Chrome浏览器那么好。
注意:例子“Madoka”中的SVG stroke动画在IE浏览器中看不到效果。(我们在stroke-dashoffset中使用了transition)当你要制作自己的input输入框动画效果时,请时刻注意一点,某些效果可能因为bug的原因而不能再iOS或IE浏览器中正常工作。
完整源码下载地址:https://tc5.us/file/21793581-403545906
14款CSS3炫酷表单input输入框美化效果【附源码】相关推荐
- html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...
- html浮动炫酷样式,jQuery和CSS3炫酷表单浮动标签特效
这是一款炫酷的jQuery和CSS3表单浮动标签特效.浮动标签是指输入框中的文字或占位文本在输入框聚焦的时候,以动画的方式浮动到指定的地方.浮动标签特效是一种新颖时尚的动画特效,不仅效果很酷,而且能以 ...
- 深度盘点:这20套可视化炫酷大屏真香啊(附源码)
由于公司项目里面用到一个数据可视化大屏页面,自己网上各种谷歌百度,发现资源良莠不齐,而且大多数都是收费的,甚至一个页面一收费的那种,前前后后自己不管是付费的还是免费的收集了不少,于是自己打算整理下,免 ...
- html线框聚焦效果,24种表单input输入框聚焦动画特效
这是一组效果超酷的表单input输入框聚焦CSS3动画特效.这组特效共24种不同的聚焦动画效果,分为3个类别,分别是边框动画特效,背景动画特效和浮动标签动画特效. 这组输入框聚焦特效主要使用CSS3 ...
- 最新超炫酷的动态引导页官网HTML源码
正文: 最新超炫酷的动态引导页官网HTML源码,背景是动态的,非常炫酷,有兴趣的自行去体验吧,其它就没什么好介绍的了. 程序: wwxegu.lanzoui.com/iOt9B0h05iof 图片:
- 炫酷星空个人主页动态特效引导页面 浏览器源码 手机自适应引导页HTML
炫酷星空个人主页动态特效引导页面 浏览器源码 手机自适应引导页HTML 效果: 完整版 链接: https://pan.baidu.com/s/1DbGaiqB5-29uoVbPK0fxCw 提取码: ...
- HTML form表单 input输入框
记录: form标签的作用是在页面引入一个表单,该表单可以直接将数据提交给服务器.action属性用来设置提交的服务器地址 描述: input输入框.通过type属性可以设置不同类型的输入框. 解决方 ...
- 一起用python做个炫酷音乐播放器【V3.0含源码及打包exe】
前言 熟悉的小伙伴都知道,前段时间写了一篇关于音乐播放器的文章–Python自制一款炫酷音乐播放器.不少小伙伴私信我,对播放器提了一些改进建议,对播放器的一些逻辑bug优化完善.今天音乐播放器3.0版 ...
- php炫酷个人网站,炫酷好用的php个人发卡网源码-运营级自动发卡平台整站源码...
本套个人自动发卡网源码已接入码支付,让个人站长可免签约收款,网站界面风格使用的是王者荣耀皮肤,非常炫酷,并已亲测源码完整无错,下载即可使用!在源码文件中也配有详细的码支付收款使用教程供新人站长观看,本 ...
最新文章
- Payment Terms 付款条件
- C#使用事件方式Winform窗体之间传值
- 从struts2拦截器到自定义拦截器
- 三分钟带你掌握 CSS3 的新属性
- Spring中的异步和事务性事件侦听器
- 80C51汇编语言有哪几条常用伪指令,单片微机原理与接口技术答案(宋跃版)
- xdf文件转换成pdf在线_在线PDFtodoc转换器智能转换PDF文件
- 在线文本纵向排版工具
- [No0000151]菜鸟理解.NET Framework中的CLI,CLS,CTS,CLR,FCL,BCL
- [从零开始学习FPGA编程-26]:进阶篇 - 基本组合电路-数据选择器(Verilog语言)
- linux中rpm -q命令,Linux中的RPM
- android 面包屑控件,android面包屑導航欄的實現
- 图像处理之LOMO特效
- 【产品分析】共享充电宝
- 从Go走进plan9汇编
- Redis(三)【五大数据类型三种特殊数据类型】
- JAXWS CXF Spring + MyEclipse + Maven + Tomcat Byron自學視頻02
- 修改dpr提高ECharts图表的清晰度
- 亵渎小说介绍_从PHP过渡到:亵渎神灵,虚张声势还是常识?
- ERROR 1226 (42000):User 'root' has exceeded the 'max_questions' resource (current value: 2)