添加focus动画

application/admin/view/login.index.html

@@ -36,8 +36,8 @@
         <form onsubmit="return false;" data-auto="true" method="post" class="content layui-form">
             <div class="people">
                 <div class="tou"></div>
-                <div id="left-hander" class="initial_left_hand transition-min"></div>
+                <div id="left-hander" class="initial_left_hand transition"></div>
-                <div id="right-hander" class="initial_right_hand transition-min"></div>
+                <div id="right-hander" class="initial_right_hand transition"></div>
             </div>
             <ul>
                 <li>

public/static/theme/default/css/login.css

@@ -1,15 +1,45 @@
 @charset "utf-8";
 
-html,body{height:100%;width:100%}
+html, body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden
+}
+
+.login-container {
+    background-color: #1c77ac;
+    overflow: hidden;
+    font-family: '微软雅黑', serif;
+    margin: 0 auto;
+    min-width: 980px;
+    font-size: 9pt
+}
+
+.login-container ul {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.login-container ul li {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.login-container img {
+    border: 0;
+}
 
-/* login */
-.login-container {background-color:#1c77ac; overflow:hidden;font-family:'微软雅黑'; margin:0 auto;min-width:980px;font-size:9pt}
-.login-container ul{display:block;margin:0;padding:0;list-style:none;}
-.login-container ul li{display:block;margin:0;padding:0;list-style: none;}
-.login-container img{border:0;}
 .login-container .clouds {
     background: url("../img/login/cloud_three.png") repeat-x left 15%;
-    position: absolute;left: 0;top: 0;height: 100%;width: 300%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 300%;
     -webkit-animation: cloudmove 200s linear infinite;
     -moz-animation: cloudmove 200s linear infinite;
     -o-animation: cloudmove 200s linear infinite;
@@ -19,6 +49,7 @@ html,body{height:100%;width:100%}
     -o-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }
+
 .login-container .clouds-fast {
     background: url("../img/login/cloud.png") no-repeat 0px 40%;
     -webkit-animation: cloudmove 30s linear infinite;
@@ -26,43 +57,220 @@ html,body{height:100%;width:100%}
     -o-animation: cloudmove 30s linear infinite;
     animation: cloudmove 30s linear infinite;
 }
+
 .login-container .clouds-footer {
     background: url("../img/login/cloud_one.png") no-repeat left 100%;
     animation: none
 }
-@-webkit-keyframes cloudmove {0% {left: -50%}100% {left: 150%}}
+
-@-moz-keyframes cloudmove {0% {left: -50%}100% {left: 150%}}
+@-webkit-keyframes cloudmove {
-@keyframes cloudmove {0% {left: -50%}100% {left: 150%}}
+    0% {
+        left: -50%
+    }
+    100% {
+        left: 150%
+    }
+}
+
+@-moz-keyframes cloudmove {
+    0% {
+        left: -50%
+    }
+    100% {
+        left: 150%
+    }
+}
+
+@keyframes cloudmove {
+    0% {
+        left: -50%
+    }
+    100% {
+        left: 150%
+    }
+}
+
 .login-container a,
-.login-container a:focus{text-decoration:none;color:#000;outline:none;blur:expression(this.onFocus=this.blur());}
+.login-container a:focus {
-.login-container a:hover{color:#00a4ac;text-decoration:none;}
+    text-decoration: none;
-.login-container .header{height:47px;position:absolute; position:fixed; top:0; background:url(../img/login/loginbg1.png) repeat-x;z-index:100; width:100%;}
+    color: #000;
-.login-container .header span{line-height:47px; text-indent:44px; float:left;font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;color:#DDD;font-size: 12px;}
+    outline: none;
-.login-container .header ul{float:right; padding-right:30px;}
+    blur: expression(this.onFocus=this.blur());
-.login-container .header ul li{float:left; margin-left:20px; line-height:47px;}
+}
-.login-container .header ul li a{color:#afc5d2;}
+
-.login-container .header ul li a:hover{color:#fff;}
+.login-container a:hover {
-.login-container .container{background:url(../img/login/loginbg3.png) no-repeat center center; width:100%; height:585px; overflow:hidden; position:relative; top:47px;}
+    color: #00a4ac;
-.login-container .logo{background:url(http://static.cdn.cuci.cc/2016/0414/af3c5d9fcf94b34113274f8c047755fc.png?imageMogr2/thumbnail/!160x56r/gravity/Center/crop/160x56/interlace/1) no-repeat center;width:100%; height:170px; margin-top:40px;}
+    text-decoration: none;
+}
+
+.login-container .header {
+    height: 47px;
+    position: absolute;
+    position: fixed;
+    top: 0;
+    background: url(../img/login/loginbg1.png) repeat-x;
+    z-index: 100;
+    width: 100%;
+}
+
+.login-container .header span {
+    line-height: 47px;
+    text-indent: 44px;
+    float: left;
+    font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
+    color: #DDD;
+    font-size: 12px;
+}
+
+.login-container .header ul {
+    float: right;
+    padding-right: 30px;
+}
+
+.login-container .header ul li {
+    float: left;
+    margin-left: 20px;
+    line-height: 47px;
+}
+
+.login-container .header ul li a {
+    color: #afc5d2;
+}
+
+.login-container .header ul li a:hover {
+    color: #fff;
+}
+
+.login-container .container {
+    background: url(../img/login/loginbg3.png) no-repeat center center;
+    width: 100%;
+    height: 585px;
+    overflow: hidden;
+    position: relative;
+    top: 47px;
+}
 
 /* 登录表单 */
-.login-container .content{width:692px; height:336px; background:url(../img/login/logininfo.png) no-repeat; margin:80px auto auto auto;position:relative;display:block;}
+.login-container .content {
-.login-container .content ul{margin-left:285px;margin-right:60px;}
+    width: 692px;
-.login-container .content ul li{margin-bottom:25px;position:relative}
+    height: 336px;
-.login-container .content ul li input{margin-bottom:25px;position:relative;background:url(../img/icon.png) no-repeat;background-size:20px;padding-left:38px}
+    background: url(../img/login/logininfo.png) no-repeat;
-.login-container .content ul li input.username{background-position: 8px 7px}
+    margin: 80px auto auto auto;
-.login-container .content ul li input.password{background-position: 8px -20px}
+    position: relative;
-.login-container .login-input {display:block;width:100%;padding-left:10px;height: 38px;line-height:38px;line-height:36px\9;border:1px solid #e6e6e6;background-color:#fff;border-radius:2px;}
+    display: block;
+}
+
+.login-container .content ul {
+    margin-left: 285px;
+    margin-right: 60px;
+}
+
+.login-container .content ul li {
+    margin-bottom: 25px;
+    position: relative
+}
+
+.login-container .content ul li input {
+    margin-bottom: 25px;
+    position: relative;
+    background: url(../img/icon.png) no-repeat;
+    background-size: 20px;
+    padding-left: 38px
+}
+
+.login-container .content ul li input.username {
+    background-position: 8px 7px
+}
+
+.login-container .content ul li input.password {
+    background-position: 8px -20px
+}
+
+.login-container .login-input {
+    display: block;
+    width: 100%;
+    padding-left: 10px;
+    height: 38px;
+    line-height: 38px;
+    line-height: 36px \9;
+    border: 1px solid #e6e6e6;
+    background-color: #fff;
+    border-radius: 2px;
+}
 
 /* 头像 */
-.login-container .people{width:165px; height:96px;position:relative;top:8px;left:-70px}
+.login-container .people {
-.login-container .people .tou{background: url("../img/login/tou.png") no-repeat;width: 97px;height: 92px;position: absolute;top: -87px;left: 140px;}
+    width: 165px;
-.login-container .people .left_hand{background: url("../img/login/left_hand.png") no-repeat;width: 32px;height: 37px;position: absolute;top: -38px;left: 150px}
+    height: 96px;
-.login-container .people .right_hand{background: url("../img/login/right_hand.png") no-repeat;width: 32px;height: 37px;position: absolute;top: -38px;right: -64px;}
+    position: relative;
-.login-container .people .initial_left_hand{background: url("../img/login/hand.png") no-repeat;width: 30px;height: 20px;position: absolute;top: -12px;left: 100px;}
+    top: 8px;
-.login-container .people .initial_right_hand{background: url("../img/login/hand.png") no-repeat;width: 30px;height: 20px;position: absolute;top: -12px;right: -112px;}
+    left: -70px
+}
+
+.login-container .people .tou {
+    background: url("../img/login/tou.png") no-repeat;
+    width: 97px;
+    height: 92px;
+    position: absolute;
+    top: -87px;
+    left: 140px;
+}
+
+.login-container .people .left_hand {
+    background: url("../img/login/left_hand.png") no-repeat;
+    width: 32px;
+    height: 37px;
+    position: absolute;
+    top: -38px;
+    left: 150px
+}
+
+.login-container .people .right_hand {
+    background: url("../img/login/right_hand.png") no-repeat;
+    width: 32px;
+    height: 37px;
+    position: absolute;
+    top: -38px;
+    right: -64px;
+}
+
+.login-container .people .initial_left_hand {
+    background: url("../img/login/hand.png") no-repeat;
+    width: 30px;
+    height: 20px;
+    position: absolute;
+    top: -12px;
+    left: 100px;
+}
+
+.login-container .people .initial_right_hand {
+    background: url("../img/login/hand.png") no-repeat;
+    width: 30px;
+    height: 20px;
+    position: absolute;
+    top: -12px;
+    right: -112px;
+}
 
 /* 底部版权 */
-.login-container .footer{height:50px; line-height:50px; text-align:center; background:url(../img/login/loginbg2.png) repeat-x;position:fixed;_position:absolute;*position:absolute;bottom:0;width:100%; color:#0b3a58;color:#fff}
+.login-container .footer {
-.login-container .footer a{font-weight:bold;color:#0b3a58;}
+    height: 50px;
-.login-container .footer a:hover{color:#fff;color:#fff}
+    line-height: 50px;
+    text-align: center;
+    background: url(../img/login/loginbg2.png) repeat-x;
+    position: fixed;
+    _position: absolute;
+    *position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: #fff
+}
+
+.login-container .footer a {
+    font-weight: bold;
+    color: #0b3a58;
+}
+
+.login-container .footer a:hover {
+    color: #fff;
+}