mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2025-04-05 19:41:44 +08:00
添加focus动画
This commit is contained in:
Anyon
parent
e7c6dcf0d5
commit
f674acc31c
@ -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="right-hander" class="initial_right_hand transition-min"></div>
|
||||
<div id="left-hander" class="initial_left_hand transition"></div>
|
||||
<div id="right-hander" class="initial_right_hand transition"></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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%;
|
||||
background: url("../img/login/cloud_three.png") repeat-x left 15%;
|
||||
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,50 +49,228 @@ 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% ;
|
||||
background: url("../img/login/cloud.png") no-repeat 0px 40%;
|
||||
-webkit-animation: cloudmove 30s linear infinite;
|
||||
-moz-animation: cloudmove 30s linear infinite;
|
||||
-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
|
||||
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%}}
|
||||
@keyframes cloudmove {0% {left: -50%}100% {left: 150%}}
|
||||
|
||||
@-webkit-keyframes cloudmove {
|
||||
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:hover{color:#00a4ac;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 .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;}
|
||||
.login-container a:focus {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
outline: none;
|
||||
blur: expression(this.onFocus=this.blur());
|
||||
}
|
||||
|
||||
.login-container a:hover {
|
||||
color: #00a4ac;
|
||||
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 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 .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 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 .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 .people {
|
||||
width: 165px;
|
||||
height: 96px;
|
||||
position: relative;
|
||||
top: 8px;
|
||||
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 a{font-weight:bold;color:#0b3a58;}
|
||||
.login-container .footer a:hover{color:#fff;color:#fff}
|
||||
.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: #fff
|
||||
}
|
||||
|
||||
.login-container .footer a {
|
||||
font-weight: bold;
|
||||
color: #0b3a58;
|
||||
}
|
||||
|
||||
.login-container .footer a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user