css3小图标跳动效果 | 简单大气HTML登录页面

转自:http://www.cnblogs.com/wangyongx/p/5022529.html

css3跳动图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
@-webkit-keyframes bounce-down {
 25% {-webkit-transform: translateY(-5px);}
 50%, 100% {-webkit-transform: translateY(0);}
 75% {-webkit-transform: translateY(5px);}
}

@keyframes bounce-down {
 25% {transform: translateY(-5px);}
 50%, 100% {transform: translateY(0);}
 75% {transform: translateY(5px);}
}

.animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;
}

@-webkit-keyframes bounce-up {
 25% {-webkit-transform: translateY(10px);}
 50%, 100% {-webkit-transform: translateY(0);}
 75% {-webkit-transform: translateY(-10px);}
}

@keyframes bounce-up {
 25% {transform: translateY(10px);}
 50%, 100% {transform: translateY(0);}
 75% {transform: translateY(-10px);}
}

.animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.5s linear infinite;animation: bounce-up 1.5s linear infinite;}
</style>
</head>

<body>
<div class="animate-bounce-up"></div>
<div class="animate-bounce-down"></div>
</body>
</html>
View Code

 简单大气HTML登录页面

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Login</title>  
<link rel="stylesheet" type="/assets/libs/font-awesome/fonts/FontAwesome.otf" href="theme.css" /> 
 <style>
         html{   
         width: 100%;   
         height: 100%;   
         overflow: hidden;   
         font-style: sans-serif;   
        }   
        body{   
         width: 100%;   
         height: 100%;   
         font-family: 'Open Sans',sans-serif;
         margin: 0;    
         background-color: #4A374A;   
        }   
        #login{   
         position: absolute;   
         top: 40%;   
         left:50%;   
         margin: -150px 0 0 -150px;   
         width: 400px;   
         height: 300px;   
        }   
        #login h1{   
            color: #fff;   
            text-shadow:0 0 10px;   
            letter-spacing: 1px;   
            text-align: center;  
            font-size: 2.1em;   
            margin: 0 0 1em 0; 
        }  
        #login_btn1,#login_btn2,#login_btn3{
            width: 248px;   
            height: 30px;   
            margin-bottom: 18px;
            margin-left:50px;            
            outline: none;   
            padding: 10px 10px 10px 40px;   
            font-size: 13px;   
            color: #fff;   
            text-shadow:1px 1px 1px;   
            border-top: 1px solid #312E3D;   
            border-left: 1px solid #312E3D;   
            border-right: 1px solid #312E3D;   
            border-bottom: 1px solid #56536A;   
            border-radius: 4px;   
            background-color: #2D2D3F; 
            box-shadow:1px 1px 1px 0 #000 inset; 
            
        }   
        .but{   
         width: 120px;   
         min-height: 20px;   
         display: block;   
         background-color: #4a77d4;   
         border: 1px solid #3762bc;   
         color: #fff;   
         padding: 9px 14px;   
         font-size: 12px;   
         line-height: normal;   
         border-radius: 5px;   
         margin-left: 50px;   
         float:left;
        }
        .but_login{float:right;margin-right:50px;}
        .login_btn_div{position:relative;}
        .login_i{width:30px;height:30px;position:absolute;left:30px;top:0;text-align:center}
        .login_i_i{margin-top: 13px;font-size: 15px;}
        .but_div{margin-top: 15px;}
        .login_btn_rightdiv{
            position: absolute;
            height: 50px;
            right: 70px;
            top: 0;
            color: #ddd;
            font-weight: 600;
            font-size: 11px;
            vertical-align: middle;
            line-height: 50px;
            text-shadow: 0.1px 0.1px 0.1px;
        }
    </style>
</head>  
<body>  

    <div id="login">  
    
        <h1>Management System</h1> 
        
        <form action="" method="post" id="login-form" >
        
            <div class='login_btn_div'>
                <div class="login_i"><i class="fa fa-user-o login_i_i" aria-hidden="true"></i></div>
                <input id="login_btn1" type="text" required="required" placeholder="用户名" name="u"></input> 
            </div> 
            
            <div class='login_btn_div'>
                <div class="login_i"><i class="fa fa-unlock-alt login_i_i" aria-hidden="true"></i></div>
                <input id="login_btn2" type="password" required="required" placeholder="密码" name="p"></input>  
            </div>
            
            <div class='login_btn_div'>
                <div class="login_i"><i style="font-size:13px;margin-left:2px;" class="fa fa-television login_i_i" aria-hidden="true"></i></div>
                <input id="login_btn3" style="color:#ddd" type="text" required="required" value="12345" readonly></input> 
                <div class='login_btn_rightdiv'>MAC</div>
            </div>
            
            <div class="but_div">
                <button class="but" type="submit">登录</button>
                <button class="but but_login" type="button">取消</button> 
            </div>
            
        </form>
            
    </div>  
    
</body>  
</html>
View Code

 

 

 

 

——————————

posted on 2017-08-18 16:23  逝年-  阅读(2181)  评论(0)    收藏  举报