<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3文本框动画输入标签效果</title>
<style>
@import url("http://fonts.useso.com/css?family=Roboto");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 16px/1 'Roboto', sans-serif;
text-align: center;
color: #555;
background: #ddd;
}
.title {
padding: 35px 0 40px;
color: #999;
border-bottom: 1px solid #aaaaaa;
}
.title span {
display: block;
margin: 0 0 15px;
font-size: 30px;
color: #555;
}
.demo {
padding: 35px 0;
border-bottom: 1px solid #aaaaaa;
background: #eee;
}
.demo:nth-child(odd) {
background: none;
}
.demo:last-child {
border: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type='text'] {
width: 220px;
padding: 10px 10px 12px 60px;
font-size: 12px;
color: #555;
border: 1px solid #aaaaaa;
background-color: #fff;
}
.css {
display: inline-block;
position: relative;
margin: 0 5px 0 0;
}
.css input {
transition: .1s all linear;
}
.css label {
position: absolute;
top: 13px;
left: 15px;
font-size: 12px;
color: #aaa;
transition: .1s all linear;
cursor: text;
}
.demo1 .css.active input {
padding-left: 45px;
}
.demo1 .css.active label {
left: 6px;
opacity: .5;
}
.demo2 .css.active input {
padding-left: 15px;
}
.demo2 .css.active label {
top: 3px;
font-size: 9px;
opacity: .8;
}
.demo3 .css.active input {
padding-left: 15px;
}
.demo3 .css.active label {
top: -18px;
}
.demo4 .css.active input {
padding-left: 15px;
}
.demo4 .css.active label {
top: 0;
left: 0;
font-size: 40px;
opacity: .1;
}
.demo5 .css.active label {
top: 8px;
left: 10px;
padding: 5px;
color: #fff;
background: #aaaaaa;
}
.demo6 .css.active input {
padding-left: 70px;
}
.demo6 .css.active label {
top: 0;
left: 0;
padding: 14px;
color: #fff;
background: #aaaaaa;
}
.demo7 .css.active label {
top: 8px;
left: 10px;
padding: 5px;
background: #eee;
box-shadow: inset 0 0 0 1px #aaaaaa;
}
.demo8 .css.active input {
padding-left: 25px;
}
.demo8 .css.active label {
top: 15px;
left: 0;
font-size: 10px;
transform: rotate(-90deg);
}
.demo9 .css.active input {
padding-left: 15px;
}
.demo9 .css.active label {
top: -15px;
left: 0;
padding: 3px 5px;
font-size: 10px;
color: #fff;
background: #aaaaaa;
}
.demo10 .css.active input {
padding-left: 15px;
}
.demo10 .css.active label {
top: 39px;
left: 0;
width: 220px;
padding: 3px 5px;
font-size: 10px;
color: #fff;
background: #aaaaaa;
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div class="demo demo1">
<div class="css">
<label for="d1">NAME</label>
<input id="d1" type="text" />
</div>
<div class="css">
<label for="d2">NAME</label>
<input id="d2" type="text" />
</div>
</div>
<div class="demo demo2">
<div class="css">
<label for="d3">NAME</label>
<input id="d3" type="text" />
</div>
<div class="css">
<label for="d4">NAME</label>
<input id="d4" type="text" />
</div>
</div>
<div class="demo demo3">
<div class="css">
<label for="d5">NAME</label>
<input id="d5" type="text" />
</div>
<div class="css">
<label for="d6">NAME</label>
<input id="d6" type="text" />
</div>
</div>
<div class="demo demo4">
<div class="css">
<label for="d7">NAME</label>
<input id="d7" type="text" />
</div>
<div class="css">
<label for="d8">NAME</label>
<input id="d8" type="text" />
</div>
</div>
<div class="demo demo5">
<div class="css">
<label for="d9">NAME</label>
<input id="d9" type="text" />
</div>
<div class="css">
<label for="d10">NAME</label>
<input id="d10" type="text" />
</div>
</div>
<div class="demo demo6">
<div class="css">
<label for="d11">NAME</label>
<input id="d11" type="text" />
</div>
<div class="css">
<label for="d12">NAME</label>
<input id="d12" type="text" />
</div>
</div>
<div class="demo demo7">
<div class="css">
<label for="d13">NAME</label>
<input id="d13" type="text" />
</div>
<div class="css">
<label for="d14">NAME</label>
<input id="d14" type="text" />
</div>
</div>
<div class="demo demo8">
<div class="css">
<label for="d15">NAME</label>
<input id="d15" type="text" />
</div>
<div class="css">
<label for="d16">NAME</label>
<input id="d16" type="text" />
</div>
</div>
<div class="demo demo9">
<div class="css">
<label for="d17">NAME</label>
<input id="d17" type="text" />
</div>
<div class="css">
<label for="d18">NAME</label>
<input id="d18" type="text" />
</div>
</div>
<div class="demo demo10">
<div class="css">
<label for="d19">NAME</label>
<input id="d19" type="text" />
</div>
<div class="css">
<label for="d20">NAME</label>
<input id="d20" type="text" />
</div>
</div>
<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript" src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
CSS3文本框动画输入标签效果.zip （5个子文件） 
CSS3文本框动画输入标签效果 jiaoben3791 
index.html 6KB js 
jquery.js 95KB index.js 389B prefixfree.min.js 12KB
CSS3文本框动画输入标签效果.jpg 42KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- (源码)基于SimPy和贝叶斯优化的流程仿真系统.zip
- (源码)基于Java Web的个人信息管理系统.zip
- (源码)基于C++和OTL4的PostgreSQL数据库连接系统.zip
- (源码)基于ESP32和AWS IoT Core的室内温湿度监测系统.zip
- (源码)基于Arduino的I2C协议交通灯模拟系统.zip
- coco.names 文件
- (源码)基于Spring Boot和Vue的房屋租赁管理系统.zip
- (源码)基于Android的饭店点菜系统.zip
- (源码)基于Android平台的权限管理系统.zip
- (源码)基于CC++和wxWidgets框架的LEGO模型火车控制系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
