用css3将input框写出类似Google登录页面的动画效果
效果一
代码如下
CSS
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; }
HTML
<div class="main"> <div class="form-container"> <input type="text" name="input1" required> <label for="input1">Account</label> <input type="text" name="input2" required> <label for="input2">Password</label> </div> </div>
效果二
代码如下:
CSS
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; }
HTML
<div class="main"> <div class="form-container"> <input type="text" name="input1" required> <label for="input1">Account</label> <input type="text" name="input2" required> <label for="input2">Password</label> </div> </div>
总结
到此这篇关于CSS3 input框的实现代码类似Google登录的动画效果的文章就介绍到这了,更多相关CSS3 input框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
复制代码 代码如下: style type="text/css" div.ui_infor p {font-size: 16px;} ...
"Code tailor",为前端开发者提供技术相关资讯以及系列基础文章,微信关注“小和...
NO.1 前言 Tooltips常被称为 提示框(或信息提示框) ,提示框能够以较强的交互...
linkid="system_style"type="text/css"href="global.css"rel="stylesheet"/ divi...
1. 将成功生成的图标文件下载并改名为favico.ico,上传到网站根目录。 2. 在网站...
Dreamweaver中的代码想要插入注释,该怎么添加呢?下面我们就来看看详细的教程。...
在Dreamweaver中,给表格增加css定位,表格就变得象层一样可拖动。 1.在文档中插...
自 2021 年 1 月 29 日正式启动以来,开源软件供应链点亮计划-暑期 2021 收到众...
前言 最近在使用阿里云K8s ACK创建集群,并发布前后台应用,在使用过程中创建无...
1.如何清除图片下方出现几像素的空白间隙? 复制代码 代码如下: 方法1: img{dis...