这是一款使用CSS3制作的炫酷炫酷浮动标签设计效果。该浮动标签效果分为标签上浮动,标签右浮动和标签下浮动效果,它们均通过CSS3和少量jQuery代码来完成。
使用方法
HTML结构
所有的浮动标签均使用一个div
作为容器,然后里面放置一个<input>
元素和一个<label>
元素。
<div class="input-element"> <label for="input">Float top label</label> <input type="text" id="input" name="input"> </div>
CSS样式
首先为<input>
元素和<label>
元素设置基本的CSS样式。
.container { width: 300px; margin: 0 auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -51%); transform: translate(-50%, -51%); -webkit-backface-visibility: hidden; } .input-element { margin: 0 auto; padding-top: 30px; position: relative; overflow: visible; } .input-element:last-child { margin-bottom: 0; } .input-element:after { content: " "; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff; } .input-element:before { content: " "; display: block; position: absolute; bottom: 0; width: 0; height: 1px; background: #3B7FC4; -webkit-transition: width .3s ease-in-out; transition: width .3s ease-in-out; z-index: 20; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .input-element.right:before { left: 0; -webkit-transform: translateX(0); transform: translateX(0); } .input-element label { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); color: #fff; top: 42px; left: 0; position: absolute; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 100%; } .input-element label:hover { cursor: pointer; color: #efefef; } .input-element input { width: 100%; padding: 8px 0; background: none; border: none; outline: none; color: #fff; font-size: 18px; -webkit-backface-visibility: hidden; }
在input
元素聚焦的时候,通过jQuery来为它添加.active
的class类,此时修改label
标签位置和字体大小。
.input-element.active label { top: 15px; color: #3B7FC4; font-size: 12px; }
如果想使标签右浮动,则添加一个.right
的class类即可,向下浮动添加.bottom
class类。
.input-element.active.right label { top: 42px; left: 100%; font-size: 18px; } .input-element.active.bottom label { top: calc(100% + 5px); font-size: 14px; }
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!