一个简易登录界面

最新推荐文章于 2024-08-15 23:11:51 发布

山顶洞人95277

最新推荐文章于 2024-08-15 23:11:51 发布

阅读量855

点赞数

本文链接：https://blog.csdn.net/weixin_44567226/article/details/89088985

版权

代码如下：
自行引用jquery插件和图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>请登录</title>
<!--logo图片自行引用-->
<link rel="shortcut icon" href="logo.png" type="image/x-icon" >
<!--jquery插件自行引用-->
<script src="jquery.min.js"></script>
</head>
<style>
	* { margin: 0; padding: 0; list-style:none;}
	body{
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.beijing{
		/*背景图片自行引用*/
	    background-image: url(beijing.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 754px;
	}

	.logo{
		display: block;
		width: 149px;
		height: 152px;
		margin: 0 auto;
	}

	.header{
		padding-bottom: 50px;
		color: white;
		margin-left: -2100px;
	}

	.login{
		background-color:rgba(255,255,255,0.5);
		width: 40%;
		padding: 40px 0;
		border-radius: 5px;
		position: absolute;
		margin-left: 460px;
		margin-top: -600px;
	}

	.login input,.login button{
		padding: 15px;
		margin: 10px;
		height: 15px;
		border: 0 none;
		border-radius: 5px;
		font-weight: 600;
		font-size: 15px;
	}

	.login input{
		background:rgba(255,255,255,0.6);
		width: 220px;
		text-align: center;
		color: #757575;
	}

	.login button{
		width: 250px;
		background-color: #4786E7;
		color: white;
		height: 45px;
	}
</style>
<body>
  <div class="beijing">
   <div style="padding-top: 5%;">
     <!--logo图片自行引用-->
     <div class="logo"><img style="display: none" src="logo.png"></div>
     <header class="header">
     	<h1 style="letter-spacing:1px;">XXXXXXXXXXXXXXXXXXXXXX</h1>
     	<h5>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h5>
     </header>
 	 <div class="login">
 	  <ul class="text">
		  <li><input class="user" placeholder="输入用户名"></li>
	      <li><input class="passWord" placeholder="输入密码"></li>
	      <li><button onClick="login()" class="button" type="button">登 录</button></li>
      </ul>
     </div>
   </div>
  </div>
</body>
<script type="text/javascript">
	function loginIn(){
		$(".login").animate({'margin-top':"0"},"slow");
		setTimeout(loginT,500);
	}
	function loginT(){
		$(".login").animate({'padding-top':"30px"},"slow");
		$(".header").animate({'margin-left':"50px"});
		setTimeout(loginS,500);
	}
	function loginS(){
		$(".header").animate({'margin-left':"0"});
		$(".header h1").animate({'letter-spacing':"0"},"slow");
		$(".logo img").fadeIn("slow");
		setTimeout(loginF,500);
	}
	loginIn();
	function login(){
		$("body").fadeOut("slow");
		//$("body").removeAttr("background");
		setTimeout(indexIn,1000);
	}
</script>

</html>

我使用了延时触发做了个小动画，会尝试改进代码，也希望大家多多指点。