©2020-2024 ioDraw All rights reserved
<!DOCTYPE html> <html> <head> <title>漂亮背景</title> <meta charset="utf-8"/> <meta
name="author" content="Stars"/> <meta name="keywords" content=""/> <meta
name="description" content=""/> <style> *{ margin: 0; padding: 0; } body{
height: 100vh; display: flex; justify-content: center; align-items: center;
background: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
background-size: 500%; animation: backgroundframe 15s infinite linear; }
@keyframes backgroundframe { 0%{ background-position: 0% 50%; } 50%{
background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }
input:focus{ box-shadow: 0 0 5px #9ecaed; outline: none; border-color: #9ecaed;
} </style> </head> <body> <div
style="padding:25px;border-radius:15px;background-color: white;display:
flex;flex-direction: column;"> <h2 style="text-align: center;">商城系统</h3> <div
style="display: flex;padding: 10px;"> <h3 style="flex:
1;text-align:center;background-color: yellow;">用户登录</h3> <h3 style="flex:
1;text-align:center;background-color: yellowgreen;">用户注册</h3> </div> <form>
<div style="padding:10px;display: flex;align-items: center;"> <label
style="width: 25%;">用户名</label> <input style="width: 75%;border-radius:
0;padding:5px;outline:0;height: 30px;border: 1px solid grey;color: grey;"
type="text" name="username" placeholder="请输入用户名"/> </div> <div
style="padding:10px;display: flex;align-items: center;"> <label style="width:
25%;">密码</label> <input style="width: 75%;border-radius:
0;outline:0;padding:5px;height: 30px;border: 1px solid grey;color: grey;"
type="password" name="password" placeholder="请输入用户名"/> </div> </form> </div>
</body> </html>