当前位置：首页 > 下载站 > js特效 > jQuery特效 > jQuery带动画效果的CSS3表单输入框验证代码

jQuery带动画效果的CSS3表单输入框验证代码

分类: js特效 / jQuery特效	发布时间: 2018-01-09	访问量: 1550
下载量: 34

点击下载预览效果

更多>

最新下载

jQuery遮罩图片hover翻转效果

jQuery遮罩图片hover翻转效果是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效。

0 2026-01-25

jQuery鼠标点击图片滑动切换特效

jQuery鼠标点击图片滑动切换特效是一款简单的动画效果图片切换特效。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-01-25

西山居首页jQuery焦点图代码

西山居首页jQuery焦点图代码是一款带文字描述，左右箭头，索引按钮，自动轮播切换的jQuery特效代码。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-01-25

jQuery评论框插入QQ表情代码

jQuery评论框插入QQ表情代码是一款点击图标弹出表情包，插入表情代码。

0 2026-01-25

纯CSS3实现超酷幻灯片切换

纯CSS3实现超酷幻灯片切换是一款无jQuery代码就可以实现流畅的切换效果，效果很酷很漂亮哦。

0 2026-01-25

CSS3扁平化风格联系表单

CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新，整体外观不是那么华丽，但是表单扁平化的风格让人看了非常舒服，同时利用了HTML5元素的特性，表单的验证功能变得也相当简单。

0 2026-01-25

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

16082 2025-08-28
CSS3 教程

1546459 2025-08-27
Rust 教程

23226 2025-08-27
Vue 教程

25695 2025-08-22
PostgreSQL 教程

22182 2025-08-21
Git 教程

9171 2025-08-21

jQuery带动画效果的CSS3表单输入框验证代码

html,
body {
background-color: #F4F4F4;
display: flex;
width: 100%;
height: 100%;
align-items: center;
font-family: "Work Sans", sans-serif;
justify-content: center;
}

.exp-container {
width: 100%;
padding: 30px;
box-sizing: border-box;
max-width: 600px;
}

.exp {
display: flex;
flex-direction: column-reverse;
width: 100%;
margin-bottom: 30px;
position: relative;
flex-wrap: wrap;
}

.exp__label {
transition: 0.3s;
margin-bottom: 5px;
}

.exp__label:before {
content: attr(data-icon);
font-weight: normal;
font-family: "Ionicons";
font-size: 24px;
position: absolute;
left: 0;
transform: rotateY(90deg);
bottom: 0;
height: 52px;
background: transparent;
color: #000;
transform-origin: left;
display: flex;
align-items: center;
justify-content: center;
transition: color .3s 0s ease, transform .3s 0s ease;
width: 42px;
}

.exp__input {
border: 1px solid #ddd;
padding: 0 10px;
width: 100%;
height: 52px;
transition: 0.3s;
font-weight: normal;
box-sizing: border-box;
font-family: "Work Sans", sans-serif;
outline: none;
}

.exp__input:focus {
padding-left: 42px;
border-color: #bbb;
}

.exp__input:focus + label:before {
transform: rotateY(0deg);
}

.exp__input:valid {
padding-left: 42px;
border-color: green;
}

.exp__input:valid + label {
color: green;
}