Html:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录效果</title> <link href="../css/20240317.css" rel="stylesheet"> <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> </head> <body> <div>Css:@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap");*{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: url(../html/image/20240317/login_bg1.jpg); background-size: cover; background-position: center;}.wrapper{ width: 420px; background: transparent; border: 2px solid rgba(255, 255, 255, .2); color: #fff; border-radius: 10px; padding: 30px 40px; backdrop-filter: blur(20px); box-shadow: 0 0 10px rgba(0, 0, 0, .2);}.wrapper h1{ font-size: 36px; text-align: center;}.wrapper .input-box{ position: relative; width: 100%; height: 50px; margin: 30px 0;}.input-box input{ width: 100%; height: 100%; background: transparent; border: none; outline: none; border: 2px solid rgba(255, 255, 255, .2); border-radius: 40px; font-size: 16px; color: #fff; padding: 20px 45px 20px 20px;}.input-box input::placeholder{ color: #fff;}.input-box i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px;}.wrapper .remeber-forgot{ display: flex; justify-content: space-between; font-size: 15px; margin: -15px 0 15px;}.remeber-forgot label input{ accent-color: #fff; margin-right: 3px;}.remeber-forgot a{ color: #fff; text-decoration: none;}.remeber-forgot a:hover{ text-decoration: underline;}.wrapper .btn{ width: 100%; height: 45px; background: #fff; border: none; outline: none; border-radius: 40px; font-size: 16px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); cursor: pointer; color: #333; font-weight: 600;}.wrapper .register-link{ font-size: 15px; text-align: center; margin-top: 20px; color: #a66ca9;}.register-link p a{ color: #a66ca9; text-decoration: none; font-weight: 600;}.register-link p a:hover{ text-decoration: underline;}效果：
登录界面
