CSS3 input框的实现代码类似Google登录的动画效果


Posted in HTML / CSS onAugust 04, 2020

 用css3将input框写出类似Google登录页面的动画效果

效果一

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>

效果二

CSS3 input框的实现代码类似Google登录的动画效果

代码如下:

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框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 #HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 #HTML / CSS
css3实现小箭头各种图形效果
Jul 08 #HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 #HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 #HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 #HTML / CSS
CSS3新增布局之: flex详解
Jun 18 #HTML / CSS
You might like
php缓存技术介绍
2006/11/25 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
理解AngularJs指令
2015/12/10 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Python二元算术运算常用方法解析
2020/09/15 Python
python设置中文界面实例方法
2020/10/27 Python
python跨文件使用全局变量的实现
2020/11/17 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
演讲比赛的活动方案
2014/08/28 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
关于vue中如何监听数组变化
2021/04/28 Vue.js
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫