css 动画效果1

最新推荐文章于 2023-03-21 15:58:57 发布

yanfeng918

最新推荐文章于 2023-03-21 15:58:57 发布

阅读量333

点赞数

分类专栏： html、css

本文链接：https://blog.csdn.net/yanfeng918/article/details/46491385

版权

html、css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html >
<head>
	<%
		String path = request.getContextPath();
		String base = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
	<base href="<%=base%>">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta content="max-age=0" http-equiv="Cache-Control">
	<meta content="240" name="MobileOptimized">
	<meta content="YES" name="apple-touch-fullscreen">
	<meta content="yes" name="apple-mobile-web-app-capable">
 	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 	<title></title>
 	<link rel="stylesheet" href="template/buyersalerinfo/css/login.css">
 	<link rel="stylesheet" href="template/buyersalerinfo/css/clear.css">
</head>
    <body>
    	<header><img src="template/buyersalerinfo/images/logo.jpg" alt=""></header>
    	<div class="slogn">
    		<img class="slogn1" src="template/buyersalerinfo/images/slogn1.jpg" alt="">
    		<img class="slogn2" src="template/buyersalerinfo/images/slogn2.jpg" alt="">
    	</div> 
    	<form  method="post">
   			<table>
   			    <tr>
   			        <td><label for="txtname">用户名：</label></td>
   			        <td><input type="text" id="txt_name" name="uname" placeholder="请输入您的用户名"/></td>
   			    </tr>
   			    <tr>
   			        <td><label for="txtpswd">密   码：</label></td>
   			        <td><input type="password" id="txt_pswd" name="password" placeholder="请输入您的密码"/></td>
   			    </tr>   			            
   			</table>
        <input type="submit" id="txt_sub" value="登陆" />
		</form> 
    </body>
</html>

body,html{
width:100%;
height: 100%;
background: url(../images/bg.jpg) ;
background-size: 100% 100%;
}
header img{
margin:0.5rem;
width:40%;
}
.slogn{
padding: 2rem;
height: 20%;
margin:3rem auto;
font-size: 2rem;
font-family: "heiti";
}
.slogn1{
animation: animation1 2s linear 1;
-webkit-animation: animation1 2s linear 1;
-moz-animation: animation1 2s linear 1;
}

@-webkit-keyframes animation1{
0%{margin-left:-10rem;opacity:0;}
100%{margin-left:0;opacity:1;}
}
@-moz-keyframes animation1{
0%{margin-left:-10rem;opacity: 0;}
100%{margin-left:0;opacity:1;}
}
.slogn2{
margin-top:1rem;
float: right;
animation: animation2 2s linear 1;
-webkit-animation: animation2 2s linear 1;
-moz-animation: animation2 2s linear 1;
}

@-webkit-keyframes animation2{
0%{margin-right:-10rem;opacity:0;}
100%{margin-right:0;opacity:1;}
}
@-moz-keyframes animation2{
0%{margin-right:-10rem;opacity: 0;}
100%{margin-right:0;opacity:1;}
}
form{
width: 100%;
margin:0 auto;
text-align: center;
padding: 0 10rem;
}
form tr{
margin:2rem auto;
width: 100%;
}
table{
width: 100%;
color: #fff;
margin:auto auto;
}
#txt_name{
width: 80%;
margin:1rem 0;
border: 1px solid #fff;
background-color:transparent;
border-radius: 5px;
}
#txt_pswd{
width: 80%;
border: 1px solid #fff;
margin:1rem 0;
background-color:transparent;
border-radius: 5px;
}
#txt_sub{
text-align:center;
vertical-align:middle;
width: 60%;
color: #db4128;
margin:1rem auto;
height: 2rem;
border-radius:10px;
background:rgba(255,255,255,0.6);
}

yanfeng918

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 动画效果1

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String base = request.getScheme()+"://"+request.getServerN
复制链接

扫一扫

专栏目录