CSS3 input框的实现代码类似Google登录的动画效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

 body{ background-color:#acacac; } .form-container{ display: block; position: relative; width: 400px; height: 400px; background: #fff; margin: 50px auto; padding: 30px; } input{ display: block; position: relative; background: none; border: 2px solid #acacac; border-radius:5px; width: 100%; font-weight: bold; padding-left:10px; font-size: 16px; height:35px; z-index: 1; } label{ display: inline-block; position: relative; top: -32px; left: 10px; color: #acacac; font-size: 16px; z-index: 2; transition: all 0.2s ease-out; } input:focus, input:valid{ outline: none; border: 2px solid #00aced; } input:focus + label, input:valid + label{ top: -50px; font-size: 16px; color: #00aced; background-color:#fff; }

AccountPassword

 body{ background-color:#acacac; } .form-container{ display: block; position: relative; width: 400px; background: #fff; margin: 50px auto; padding: 60px; } input{ display: block; position: relative; background: none; border: none; border-bottom: 1px solid #ddd; width: 100%; font-weight: bold; font-size: 16px; z-index: 2; } label{ display: block; position: relative; top: -20px; left: 0px; color: #999; font-size: 16px; z-index: 1; transition: all 0.3s ease-out; margin-bottom:40px; } input:focus, input:valid{ outline: none; border-bottom: 1px solid #00aced; } input:focus + label, input:valid + label{ top: -50px; font-size: 16px; color: #00aced; background-color:#fff; }

AccountPassword