这是一款使用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)与我们联系处理,敬请谅解!