CSS3文本框动画输入标签效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3文本框动画输入标签效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
</body>
</html>

JS代码(index.js):

$(document).ready(function(){
	$('input').each(function(){
	$(this).on('focus',function(){
	$(this).parent('.css').addClass('active');
}
);
	$(this).on('blur',function(){
	if ($(this).val().length == 0){
	$(this).parent('.css').removeClass('active');
}
}
);
	if ($(this).val() != '') $(this).parent('.css').addClass('active');
}
);
}
);

附件:下载该文件资源,减少时间成本(增值服务)