<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    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.gonooa.com/login.html

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

                    • 相关下载
                    北京赛车玩法和赔率|官网_首页