表单/表格
炫酷设计表单浮动标签jQuery效果
PetitQ
这是一款使用 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;
}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
