用HTML做一个登录页面,可以跳转到指定页面,使用动态背景
时间: 2024-03-11 22:46:00 浏览: 23
好的,以下是一个简单的用HTML做的登录页面,其中包含一个动态背景和跳转到指定页面的功能。你可以在自己的电脑上用文本编辑器打开并保存成HTML文件,然后在浏览器中打开它。
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: black;
background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: slide 10s infinite;
}
@keyframes slide {
0% {
background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba');
}
50% {
background-image: url('https://images.unsplash.com/photo-1465453869711-7e174808ace9');
}
100% {
background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba');
}
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
text-align: center;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="https://www.example.com/dashboard">
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
```
在上面的代码中,我们使用了CSS的`background-image`属性来设置背景图片,并使用了`animation`属性来制作动态背景。我们还使用了一个`container`类来使表单居中,并使用了`box-shadow`属性来添加一个阴影效果。在form标签的`action`属性中,我们设置了指定页面的URL,当用户登录成功后,会自动跳转到该页面。