HTML精美登录页面，（动态渐变效果＋稍微透明效果）
warning:
这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。
以下是一个使用HTML和CSS创建的具有动态渐变效果和略微透明背景的登录页面示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
background-size: 400% 400%;
animation: gradientBG 10s ease infinite;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.login-container {
position: relative;
width: 300px;
height: 400px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
animation: animateLogin 1s ease-in-out forwards;
}
@keyframes animateLogin {
to {
opacity: 1;
}
}
/* 其他样式 */
.login-container * {
/* 添加其他必要的样式 */
}
</style>
</head>
<body>
<div class="login-container">
<!-- 登录表单等内容 -->
<form>
<!-- 输入框、按钮等 -->
</form>
</div>
</body>
</html>这段代码展示了如何创建一个具有动态渐变背景和稍微透明效果的登录页面。body 的 animation 属性创建了一个动态的背景渐变效果，而 .login-container 的 backdrop-filter 属性和 background-color 结合使用，为登录框添加了一个模糊的透明效果。这是一个简洁而有效的登录页面样例。
评论已关闭