具体如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"></meta> <title>Document</title> <style> html, body { margin: 0; padding: 0; font-family: "PingFang SC", "Microsoft Yahei", sans-serif; } .container { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: url("https://tse3-mm.cn.bing.net/th/id/OIP-C.8lHGYyoBPuSLsS6yFB5ACwHaEK?w=321&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7") fixed no-repeat; background-size: cover; } .login-form { width: 240px; height: 220px; display: flex; flex-direction: column; padding: 40px; text-align: center; position: relative; z-index: 100; background: inherit; border-radius: 18px; overflow: hidden; } .login-form::before { content: ""; width: calc(100% + 20px); height: calc(100% + 20px); background: inherit; box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.25); position: absolute; top: -10px; left: -10px; z-index: -1; filter: blur(6px); overflow: hidden; } .login-form h2 { font-size: 18px; font-weight: 400; color: #3d5245; } .login-form input, .login-form button { margin: 6px 0; height: 36px; border: none; background-color: rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 0 14px; color: #3d5245; } .login-form input::placeholder { color: #3d5245; } .login-form button { margin-top: 24px; background-color: rgba(57, 88, 69, 0.4); color: white; position: relative; overflow: hidden; cursor: pointer; transition: 0.4s; } .login-form button:hover { background-color: rgba(12, 80, 38, 0.67); } .login-form button::before, .login-form button::after { content: ""; display: block; width: 80px; height: 100%; background: rgba(179, 255, 210, 0.5); opacity: 0.5; position: absolute; left: 0; top: 0; transform: skewX(-15deg); filter: blur(30px); overflow: hidden; transform: translateX(-100px); } .login-form button::after { width: 40px; background: rgba(179, 255, 210, 0.3); left: 60px; filter: blur(5px); opacity: 0; } .login-form button:hover::before { transition: 1s; transform: translateX(320px); opacity: 0.7; } .login-form button:hover::after { transition: 1s; transform: translateX(320px); opacity: 1; } </style> </head> <body> <div> <div class="container"> <form action="#" class="login-form"> <h2>登录</h2> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">登录</button> </form> </div> </div> </body> </html> |
