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 相关文章推荐
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 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的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
如何通过python画loss曲线的方法
2019/06/26 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python实现canny边缘检测
2020/09/14 Python
Django model class Meta原理解析
2020/11/14 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
实习生求职自荐信
2014/02/07 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
大学毕业寄语大全
2014/04/10 职场文书
倡议书格式范文
2014/04/14 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers