写一个jsp代码,包含用户名和密码,位置居中,背景实现页面图片左右滑动效果的登陆页面,
时间: 2024-03-05 11:48:59 浏览: 79
基于jsp的动态效果的登录页面
5星 · 资源好评率100%
以下是一个简单的实现该功能的 JSP 代码:
```jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<style>
body {
background-image: url("background.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.form {
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
animation: slide 10s infinite;
}
@keyframes slide {
0% {
transform: translateX(-50%);
}
50% {
transform: translateX(50%);
}
100% {
transform: translateX(-50%);
}
}
input[type=text], input[type=password] {
padding: 10px;
margin: 10px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
width: 100%;
}
input[type=submit] {
padding: 10px;
margin: 10px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="form">
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
```
这段代码实现了一个登录页面,包含用户名和密码输入框,以及一个提交按钮。页面背景使用了一张图片,并且通过 CSS 动画实现了图片左右滑动的效果。整个表单居中显示在页面中央。
阅读全文