51rgb-css3动画22-谷歌表单登录框动画

分享 :

网盘下载链接:

提取密码: u4qi
复制提取密码
51RGB在线教育,WEB前端开发直播体验课,谷歌表单登录框动画!源码下载
  • 详情
    文件来源

    官方发布

    更新日期

    2018-01-29

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    1512次

    源码,可以直接复制使用!

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Cards hover effect</title>
    	<meta charset="utf-8" />
        <link rel="stylesheet" href="cards.scss"/>
        <style>
            * { box-sizing:border-box; }
    
    /* basic stylings ------------------------------------------ */
    body                 { background:url(https://scotch.io/wp-content/uploads/2014/07/61.jpg); }
    .container      { 
      font-family:'Roboto';
      width:600px; 
      margin:30px auto 0; 
      display:block; 
      background:#FFF;
      padding:10px 50px 50px;
    }
    h2       { 
      text-align:center; 
      margin-bottom:50px; 
    }
    h2 small { 
      font-weight:normal; 
      color:#888; 
      display:block; 
    }
    .footer     { text-align:center; }
    .footer a  { color:#53B2C8; }
    
    /* form starting stylings ------------------------------- */
    .group            { 
      position:relative; 
      margin-bottom:45px; 
    }
    input               {
      font-size:18px;
      padding:10px 10px 10px 5px;
      display:block;
      width:300px;
      border:none;
      border-bottom:1px solid #757575;
    }
    input:focus         { outline:none; }
    
    /* LABEL ======================================= */
    label                {
      color:#999; 
      font-size:18px;
      font-weight:normal;
      position:absolute;
      pointer-events:none;
      left:5px;
      top:10px;
      transition:0.2s ease all; 
      -moz-transition:0.2s ease all; 
      -webkit-transition:0.2s ease all;
    }
    
    /* active state */
    input:focus ~ label, input:valid ~ label        {
      top:-20px;
      font-size:14px;
      color:#5264AE;
    }
    
    /* BOTTOM BARS ================================= */
    .bar    { position:relative; display:block; width:300px; }
    .bar:before, .bar:after     {
      content:'';
      height:2px; 
      width:0;
      bottom:1px; 
      position:absolute;
      background:#5264AE; 
      transition:0.2s ease all; 
      -moz-transition:0.2s ease all; 
      -webkit-transition:0.2s ease all;
    }
    .bar:before {
      left:50%;
    }
    .bar:after {
      right:50%; 
    }
    
    /* active state */
    input:focus ~ .bar:before, input:focus ~ .bar:after {
      width:50%;
    }
    
    /* HIGHLIGHTER ================================== */
    .highlight {
      position:absolute;
      height:60%; 
      width:100px; 
      top:25%; 
      left:0;
      pointer-events:none;
      opacity:0.5;
    }
    
    /* active state */
    input:focus ~ .highlight {
      -webkit-animation:inputHighlighter 0.3s ease;
      -moz-animation:inputHighlighter 0.3s ease;
      animation:inputHighlighter 0.3s ease;
    }
    
    /* ANIMATIONS ================ */
    @-webkit-keyframes inputHighlighter {
        from { background:#5264AE; }
      to    { width:0; background:transparent; }
    }
    @-moz-keyframes inputHighlighter {
        from { background:#5264AE; }
      to    { width:0; background:transparent; }
    }
    @keyframes inputHighlighter {
        from { background:#5264AE; }
      to    { width:0; background:transparent; }
    }
        </style>
    </head>
    <body>
        <div class="container">
      
      <h2>Google Material Design in CSS3<small>Inputs</small></h2>
      
      <form>
        
        <div class="group">      
          <input type="text" required>
          <span class="highlight"></span>
          <span class="bar"></span>
          <label>Name</label>
        </div>
          
        <div class="group">      
          <input type="text" required>
          <span class="highlight"></span>
          <span class="bar"></span>
          <label>Email</label>
        </div>
        
      </form>
          
      <p class="footer">
        网页设计自学平台<a href="www.51rgb.com">51rgb</a>
      </p>
      
    </div>
    </body>
    </html>
    
    
  • 使用说明

    本节课视频资源:

    课程在线回放地址:http://www.51rgb.cn/login.html

    关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

  • 相关下载
在线客服
热线电话

微信公众账号