您的位置：首页 > Web前端 > CSS

css 动画效果1

2015-06-14 15:09 621 查看

<%@ 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);

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航