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 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
实现Python与STM32通信方式
2019/12/18 Python
python实现银行实战系统
2020/02/26 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
纪念建党演讲稿范文
2014/01/13 职场文书
满月酒答谢词
2014/01/14 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
周年庆典主持词
2014/04/02 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
2015年测量员工作总结
2015/05/23 职场文书
民主生活会意见
2015/06/05 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
如何理解PHP核心特性命名空间
2021/05/28 PHP