素材网 素材网

CSS3制作干净的文本框动画输入标签效果

下载资源()次

阅读次数()次

发布时间:2014-03-30

CSS3制作干净的文本框动画输入标签效果
分享到:

用法简介:

来源:xw素材网

CSS3制作干净的文本框动画输入标签效果。
文件引用:

.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;
}


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。