html浮动炫酷样式,jQuery和CSS3炫酷表单浮动标签特效
这是一款炫酷的jQuery和CSS3表单浮动标签特效。浮动标签是指输入框中的文字或占位文本在输入框聚焦的时候,以动画的方式浮动到指定的地方。浮动标签特效是一种新颖时尚的动画特效,不仅效果很酷,而且能以明确的方式提示用户该输入框应该填写上面内容,用户体验非常不错。
这个浮动标签特效中共有4种不同的动画效果。分别是Fieldset样式的浮动标签,使用font-size来动画的浮动标签,使用CSS3 transforms和jquery easing来动画的浮动标签和透明度动画浮动标签。
使用方法
HTML结构
这4中浮动标签的HTML结构都使用
First Name
CSS样式
每一中浮动标签的CSS样式各不相同,来看看第一种浮动标签的设计方式。第一种浮动标签方式使用的是Fieldset,在输入框聚焦的时候,占位文本会浮动到Filedset上面。为了美观,整个效果还添加了一层包裹元素以及一个h2文本作为大标题。为元素添加一些节本样式:
main {
width: 500px; margin: 0 auto; padding-bottom: 10px;
background: white; border-radius: 3px; overflow: hidden;
}
main h2 {
font-size: 24px; font-weight: normal;
background: hsl(120, 40%, 95%); color: hsl(120, 40%, 40%);
text-align: center;
padding: 20px 0; margin-bottom: 40px;
}
form表单中的div设置为相对定位。div中的input和label元素设置相同的宽度、高度和行高。在高度设置上,为了修补Firefox浏览器的一个小bug,使用一个计算公式来获取高度。height = 24(lineheight) + 10*2(padding) + 2(border)。
.flp input, .flp label {
width: 400px; display: block;
font: inherit; font-size: 16px; line-height: 24px;
/*fixed height for FF line height issue.
height = 24(lineheight) + 10*2(padding) + 2(border)*/
height: 46px;
border: 1px solid #999;
}
然后input和label元素分别设置各自的不同样式,label元素需要动画,设置为绝对定位方式,并且它的左右padding要比上下padding少2个像素,因为后面需要做单个文字的动画,在.ch中会补足这2个像素。
最后是实际的动画效果的CSS样式。插件初始化的时候,会将所有的字母单独使用包裹起来,做成一个一个的单独字母。在输入框聚焦的时候,js代码会为输入框元素添加.focussed class。实际的字母浮动动画是通过jquery.easing来完成的。
/*label styles*/
.ch {
display: block; float: left;
position: relative; /*for upward animation*/
background: white;
}
.ch:first-child {padding-left: 2px;}
.ch:last-child {padding-right: 2px;}
/*active input label*/
.focussed {
/*when any input is already focussed clicking on it(label) again won't do anything*/
pointer-events: none;
}
JAVASCRIPT
该浮动标签效果中使用jquery.easing来完成实际的动画特效。首先,插件在初始化时将每一个输入框中的文字打散为单个的字母,每一个字母都用元素来包裹起来。接下来当输入框聚焦的时候,使用jquery.easing来完成字母的浮动动画特效。
//breakdown the labels into single character spans
$(".flp label").each(function(){
var sop = ''; //span opening
var scl = ''; //span closing
//split the label into single letters and inject span tags around them
$(this).html(sop + $(this).html().split("").join(scl+sop) + scl);
//to prevent space-only spans from collapsing
$(".ch:contains(' ')").html(" ");
})
var d;
//animation time
$(".flp input").focus(function(){
//calculate movement for .ch = half of input height
var tm = $(this).outerHeight()/2 *-1 + "px";
//label = next sibling of input
//to prevent multiple animation trigger by mistake we will use .stop() before animating any character and clear any animation queued by .delay()
$(this).next().addClass("focussed").children().stop(true).each(function(i){
d = i*50;//delay
$(this).delay(d).animate({top: tm}, 200, 'easeOutBack');
})
})
$(".flp input").blur(function(){
//animate the label down if content of the input is empty
if($(this).val() == "")
{
$(this).next().removeClass("focussed").children().stop(true).each(function(i){
d = i*50;
$(this).delay(d).animate({top: 0}, 500, 'easeInOutBack');
})
}
})
其它几个效果的CSS和JS都分别写在了HTML文件中,原理基本相同,你可以下载来自行研究。
html浮动炫酷样式,jQuery和CSS3炫酷表单浮动标签特效相关推荐
- jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
- android 卡片收缩展开,jQuery和CSS3炫酷堆叠卡片展开和收缩特效
插件描述:这是一款效果超酷的jQuery和CSS3堆叠卡片展开和收缩特效.该图片特效开始的时候卡片被堆叠在一起,当用户点击最上面的卡片的时候,堆叠图片以各种动画方式展开.展开后再点击任意卡片,它们又会 ...
- html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效
这是一款效果非常酷的jQuery和CSS3圆形图片切换特效.该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画.可以任意设置多张图片进行来回翻转.旋转切换,效果堪称一流. 使用 ...
- html5 拉窗帘 效果,jQuery和CSS3超酷3D拉窗帘式滚动导航特效
这是一款效果炫酷的jQuery和CSS3 3D拉窗帘式导航特效.该特效使用CSS transformations 和 jQuery使两块"窗帘"沿Z轴方向模拟被拉开的效果. HTM ...
- 3 css 奖品出现弹出动画_基于jquery css3实现点击动画弹出表单源码特效
下图给大家展示了使用jquery css实现的点击动画弹出表单源码,有上传表单.删除表单.发送评论表单,都是通过鼠标点击图标按钮动画弹出的表单源码特效. 效果图展示如下: html代码: 上传 选择文 ...
- 自制“低奢内”CSS3登入表单,包含JS验证,请别嫌弃哦。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- 基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览 源码下载 实现的代码. html代码 ...
- 织梦ajax表单提交参数错误,【织梦二次开发】织梦jquery+ajax方式提交自定义表单...
我们在dedecms教程中学到很多,比如可以借助jquery ajax提交dedecms自定义表单到后台.此例只做为参考,实际项目中根据自己的情况酌情修改. html部分: 姓名: 电话: 留言: j ...
最新文章
- linux 用户java_linux之用户管理
- 我眼中的JavaScript函数式编程
- python打开另一个程序_python 新手问题啊,为什么我运行一个python程序,另一个就会自动退出呢?始终只能运行一个...
- 什么是抽象类?抽象类的作用_Java面试题amp;和amp;amp;的作用和区别
- php中怎么添加css样式_html怎么添加css样式?
- u3d学习:helloworld
- 我慌了!我妈从床底掏出了我珍藏多年的小本本-----JAVA_Lambda表达式(笔记)
- ODM、JDM、OEM概念
- VM 虚拟机屏幕大小的调整
- 使用TRA命令进行磁带备份的命令汇总(转)
- 关于DBSCAN图像上小圆圈和大圆圈的问题
- RNA修饰技术介绍|介孔二氧化硅纳米颗粒(MSN)搭载的微小RNA-24(miR-24)纳米载体复合物
- 中秋节祝福html,中秋节祝福页面 在线制作祝福网页 祝你中秋节快乐!
- pycharm下载及安装说明
- 杰奇1.7用php53,杰奇1.7模板一库多站配置教程
- java入库_Java实现商品的查找、添加、出库、入库操作完整案例
- UDDI和WSDL的关系
- Python资源大全--收藏好
- 百济神州年营收近12亿美元:亏14亿美元 被列入预摘牌名单
- 男士健康不可缺的11种食物
热门文章
- mysql ado.net 实体数据模型_Visual Studio2017中如何让Entity Framework工具【ADO.NET实体数据模型】支持MYSQL数据源...
- 异想维度 java_Java实现多字段(维度)复杂排序
- 指纹识别工具(CMSeek)
- flink写入 mysql_flink写数据到mysql(java)
- mysql构建栋_【转载】这次拆库 应是微服务化的拆分方式
- mysql 8.0认证失败_解决mysql8.0因密码认证插件导致的链接不上
- margin折叠-从子元素margin-top影响父元素引出的问题
- gulp webpack整合
- 基于webpack搭建的vue element-ui框架
- Linux系统之TroubleShooting(启动故障排除)