jsp项目登录页面动画实现源代码
时间: 2023-12-16 18:02:59 浏览: 28
以下是一个简单的 JSP 登录页面动画实现的源代码示例:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<style>
/* 登录框样式 */
.login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 40px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border-radius: 10px;
}
/* 动画样式 */
.animation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: #fff;
border-radius: 50%;
animation: rotate 2s infinite linear;
}
/* 旋转动画 */
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login Form</h2>
<form action="login" method="post">
<input type="text" name="username" placeholder="Username" required>
<br><br>
<input type="password" name="password" placeholder="Password" required>
<br><br>
<button type="submit">Login</button>
</form>
</div>
<div class="animation"></div>
</body>
</html>
```
在上面的代码中,我们使用了 CSS 的 `animation` 属性来创建了一个旋转动画。这个动画是在一个圆形的白色背景中进行的,看起来像是一个旋转的光圈。同时,我们在登录框的上方放置了这个圆形的动画,从而实现了一个简单的登录页面动画效果。