时间：2024-06-25 09:52
1.效果图：
图片
HTML代码：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width， initial-scale=1.0'> <title>Document</title> <style> * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; } .container { height: 100%; background-image: linear-gradient(to right， #fbc2eb， #a6c1ee); } .login-wrapper { background-color: #fff; width: 358px; height: 588px; border-radius: 15px; padding: 0 50px; position: relative; left: 50%; top: 50%; transform: translate(-50%， -50%); } .header { font-size: 38px; font-weight: bold; text-align: center; line-height: 200px; } .input-item { display: block; width: 100%; margin-bottom: 20px; border: 0; padding: 10px; border-bottom: 1px solid rgb(128， 125， 125); font-size: 15px; outline: none; } .input-item:placeholder { text-transform: uppercase; } .btn { text-align: center; padding: 10px; width: 100%; margin-top: 40px; background-image: linear-gradient(to right， #a6c1ee， #fbc2eb); color: #fff; } .msg { text-align: center; line-height: 88px; } a { text-decoration-line: none; color: #abc1ee; }</style></head><body> <div class='container'> <div class='login-wrapper'> <div class='header'>Login</div> <div class='form-wrapper'> <input type='text' name='username' placeholder='username' class='input-item'> <input type='password' name='password' placeholder='password' class='input-item'> <div class='btn'>Login</div> </div> <div class='msg'> Don't have account? <a href='#'>Sign up</a> </div> </div> </div></body></html>2.效果图：
图片
HTML代码：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width， initial-scale=1.0'> <title>Document</title> <style> body { background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat; background-size: 100% 130%; } #login_box { width: 20%; height: 400px; background-color: #00000060; margin: auto; margin-top: 10%; text-align: center; border-radius: 10px; padding: 50px 50px; } h2 { color: #ffffff90; margin-top: 5%; } #input-box { margin-top: 5%; } span { color: #fff; } input { border: 0; width: 60%; font-size: 15px; color: #fff; background: transparent; border-bottom: 2px solid #fff; padding: 5px 10px; outline: none; margin-top: 10px; } button { margin-top: 50px; width: 60%; height: 30px; border-radius: 10px; border: 0; color: #fff; text-align: center; line-height: 30px; font-size: 15px; background-image: linear-gradient(to right， #30cfd0， #330867); } #sign_up { margin-top: 45%; margin-left: 60%; } a { color: #b94648; }</style></head><body> <div id='login_box'> <h2>LOGIN</h2> <div id='input_box'> <input type='text' placeholder='请输入用户名'> </div> <div class='input_box'> <input type='password' placeholder='请输入密码'> </div> <button>登录</button><br> </div></body></html>3.效果图：
图片
HTML代码：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width， initial-scale=1.0'> <title>Document</title> <style> * { padding: 0; margin: 0; } html { height: 100%; } body { background-image: linear-gradient(to bottom right， rgb(114， 135， 254)， rgb(130， 88， 186)); } .login-container { width: 600px; height: 315px; margin: 0 auto; margin-top: 10%; border-radius: 15px; box-shadow: 0 10px 50px 0px rbg(59， 45， 159); background-color: rgb(95， 76， 194); } .left-container { display: inline-block; width: 330px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; padding: 60px; background-image: linear-gradient(to bottom right， rgb(118， 76， 163)， rgb(92， 103， 211)); } .title { color: #fff; font-size: 18px; font-weight: 200; } .title span { border-bottom: 3px solid rgb(237， 221， 22); } .input-container { padding: 20px 0; } input { border: 0; background: none; outline: none; color: #fff; margin: 20px 0; display: block; width: 100%; padding: 5px 0; transition: .2s; border-bottom: 1px solid rgb(199， 191， 219); } input:hover { border-bottom-color: #fff; } ::-webkit-input-placeholder { color: rgb(199， 191， 219); } .message-container { font-size: 14px; transition: .2s; color: rgb(199， 191， 219); cursor: pointer; } .message-container:hover { color: #fff; } .right-container { width: 145px; display: inline-block; height: calc(100% - 120px); vertical-align: top; padding: 60px 0; } .regist-container { text-align: center; color: #fff; font-size: 18px; font-weight: 200; } .regist-container span { border-bottom: 3px solid rgb(237， 221， 22); } .action-container { font-size: 10px; color: #fff; text-align: center; position: relative; top: 200px; } .action-container span { border: 1px solid rgb(237， 221， 22); padding: 10px; display: inline; line-height: 20px; border-radius: 20px; position: absolute; bottom: 10px; left: calc(72px - 20px); transition: .2s; cursor: pointer; } .action-container span:hover { background-color: rgb(237， 221， 22); color: rgb(95， 76， 194); }</style></head><body> <div class='login-container'> <div class='left-container'> <div class='title'><span>登录</span></div> <div class='input-container'> <input type='text' name='username' placeholder='用户名'> <input type='password' name='password' placeholder='密码'> </div> <div class='message-container'> <span>忘记密码</span> </div> </div> <div class='right-container'> <div class='regist-container'> <span class='regist'>注册</span> </div> <div class='action-container'> <span>提交</span> </div> </div> </div></body></html>4.效果图：
图片
HTML代码：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width， initial-scale=1.0'> <title>Document</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; } input， button { background: transparent; border: 0; outline: none; } body { height: 100vh; background: linear-gradient(#141e30， #243b55); display: flex; justify-content: center; align-items: center; font-size: 16px; color: #03e9f4; } .loginBox { width: 400px; height: 364px; background-color: #0c1622; margin: 100px auto; border-radius: 10px; box-shadow: 0 15px 25px 0 rgba(0， 0， 0， .6); padding: 40px; box-sizing: border-box; } h2 { text-align: center; color: aliceblue; margin-bottom: 30px; font-family: 'Courier New'， Courier， monospace; } .item { height: 45px; border-bottom: 1px solid #fff; margin-bottom: 40px; position: relative; } .item input { width: 100%; height: 100%; color: #fff; padding-top: 20px; box-sizing: border-box; } .item input:focus+label， .item input:valid+label { top: 0px; font-size: 2px; } .item label { position: absolute; left: 0; top: 12px; transition: all 0.5s linear; } .btn { padding: 10px 20px; margin-top: 30px; color: #03e9f4; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 2px; left: 35%; } .btn:hover { border-radius: 5px; color: #fff; background: #03e9f4; box-shadow: 0 0 5px 0 #03e9f4， 0 0 25px 0 #03e9f4， 0 0 50px 0 #03e9f4， 0 0 100px 0 #03e9f4; transition: all 1s linear; } .btn>span { position: absolute; } .btn>span:nth-child(1) { width: 100%; height: 2px; background: -webkit-linear-gradient(left， transparent， #03e9f4); left: -100%; top: 0px; animation: line1 1s linear infinite; } @keyframes line1 { 50%， 100% { left: 100%; } } .btn>span:nth-child(2) { width: 2px; height: 100%; background: -webkit-linear-gradient(top， transparent， #03e9f4); right: 0px; top: -100%; animation: line2 1s 0.25s linear infinite; } @keyframes line2 { 50%， 100% { top: 100%; } } .btn>span:nth-child(3) { width: 100%; height: 2px; background: -webkit-linear-gradient(left， #03e9f4，丰泽松盛云谱有限公司 transparent); left: 100%; bottom: 0px; animation: line3 1s 0.75s linear infinite; } @keyframes line3 { 50%，
企业-展航丝坚果有限公司 100% { left: -100%; } } .btn>span:nth-child(4) { width: 2px; height: 100%; background: -webkit-linear-gradient(top，
企业-南美利农药有限公司 transparent， #03e9f4); left: 0px; top: 100%; animation: line4 1s 1s linear infinite; } @keyframes line4 { 50%， 100% { top: -100%; } }</style></head><body> <div class='loginBox'> <h2>login</h2> <form action=''> <div class='item'> <input type='text' required> <label for=''>userName</label> </div> <div class='item'> <input type='password' required> <label for=''>password</label> </div> <button class='btn'>submit <span></span> <span></span> <span></span> <span></span> </button> </form> </div></body></html>5.效果图：
图片
HTML代码：
<!DOCTYPE html><html lang='en'><!-- https://codepen.io/danielkvist/pen/LYNVyPL --><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width， initial-scale=1.0'> <title>Document</title> <style> :root { /* COLORS */ --white: #e9e9e9; --gray: #333; --blue: #0367a6; --lightblue: #008997; /* RADII */ --button-radius: 0.7rem; /* SIZES */ --max-width: 758px; --max-height: 420px; font-size: 16px; font-family: -apple-system， BlinkMacSystemFont， 'Segoe UI'， Roboto， Oxygen， Ubuntu， Cantarell， 'Open Sans'， 'Helvetica Neue'， sans-serif; } body { align-items: center; background-color: var(--white); background: url('https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg'); /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。*/ /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; display: grid; height: 100vh; place-items: center; } .form__title { font-weight: 300; margin: 0; margin-bottom: 1.25rem; } .link { color: var(--gray); font-size: 0.9rem; margin: 1.5rem 0; text-decoration: none; } .container { background-color: var(--white); border-radius: var(--button-radius); box-shadow: 0 0.9rem 1.7rem rgba(0， 0， 0， 0.25)， 0 0.7rem 0.7rem rgba(0， 0， 0， 0.22); height: var(--max-height); max-width: var(--max-width); overflow: hidden; position: relative; width: 100%; } .container__form { height: 100%; position: absolute; top: 0; transition: all 0.6s ease-in-out; } .container--signin { left: 0; width: 50%; z-index: 2; } .container.right-panel-active .container--signin { transform: translateX(100%); } .container--signup { left: 0; opacity: 0; width: 50%; z-index: 1; } .container.right-panel-active .container--signup { animation: show 0.6s; opacity: 1; transform: translateX(100%); z-index: 5; } .container__overlay { height: 100%; left: 50%; overflow: hidden; position: absolute; top: 0; transition: transform 0.6s ease-in-out; width: 50%; z-index: 100; } .container.right-panel-active .container__overlay { transform: translateX(-100%); } .overlay { background-color: var(--lightblue); background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; left: -100%; position: relative; transform: translateX(0); transition: transform 0.6s ease-in-out; width: 200%; } .container.right-panel-active .overlay { transform: translateX(50%); } .overlay__panel { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; position: absolute; text-align: center; top: 0; transform: translateX(0); transition: transform 0.6s ease-in-out; width: 50%; } .overlay--left { transform: translateX(-20%); } .container.right-panel-active .overlay--left { transform: translateX(0); } .overlay--right { right: 0; transform: translateX(0); } .container.right-panel-active .overlay--right { transform: translateX(20%); } .btn { background-color: var(--blue); background-image: linear-gradient(90deg， var(--blue) 0%， var(--lightblue) 74%); border-radius: 20px; border: 1px solid var(--blue); color: var(--white); cursor: pointer; font-size: 0.8rem; font-weight: bold; letter-spacing: 0.1rem; padding: 0.9rem 4rem; text-transform: uppercase; transition: transform 80ms ease-in; } .form>.btn { margin-top: 1.5rem; } .btn:active { transform: scale(0.95); } .btn:focus { outline: none; } .form { background-color: var(--white); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 3rem; height: 100%; text-align: center; } .input { background-color: #fff; border: none; padding: 0.9rem 0.9rem; margin: 0.5rem 0; width: 100%; } @keyframes show { 0%， 49.99% { opacity: 0; z-index: 1; } 50%， 100% { opacity: 1; z-index: 5; } }</style></head><body> <div class='container right-panel-active'> <!-- Sign Up --> <div class='container__form container--signup'> <form action='#' class='form' id='form1'> <h2 class='form__title'>Sign Up</h2> <input type='text' placeholder='User' class='input' /> <input type='email' placeholder='Email' class='input' /> <input type='password' placeholder='Password' class='input' /> <button class='btn'>Sign Up</button> </form> </div> <!-- Sign In --> <div class='container__form container--signin'> <form action='#' class='form' id='form2'> <h2 class='form__title'>Sign In</h2> <input type='email' placeholder='Email' class='input' /> <input type='password' placeholder='Password' class='input' /> <a href='#' class='link'>Forgot your password?</a> <button class='btn'>Sign In</button> </form> </div> <!-- Overlay --> <div class='container__overlay'> <div class='overlay'> <div class='overlay__panel overlay--left'> <button class='btn' id='signIn'>Sign In</button> </div> <div class='overlay__panel overlay--right'> <button class='btn' id='signUp'>Sign Up</button> </div> </div> </div> </div> <script> const signInBtn = document.getElementById('signIn'); const signUpBtn = document.getElementById('signUp'); const fistForm = document.getElementById('form1'); const secondForm = document.getElementById('form2'); const container = document.querySelector('.container'); signInBtn.addEventListener('click'， () => { container.classList.remove('right-panel-active'); }); signUpBtn.addEventListener('click'， () => { container.classList.add('right-panel-active'); }); fistForm.addEventListener('submit'， (e) => e.preventDefault()); secondForm.addEventListener('submit'， (e) => e.preventDefault());</script></body></html>6.效果图：
图片
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>Document</title> <!-- <link rel='stylesheet' href='text.css' /> --> </head> <style> .all { width: 800px; box-shadow: -10px 10px 25px rgba(210，惠州桦岭进出口贸易有限公司 210， 210， 0.9); margin: auto; margin-top: 5%; display: flex; border-radius: 35px; background-color: #ffffff; height: 550px; } .log { width: 50%; margin: auto; } .reg { width: 50%; height: 100%; margin: auto; background-color: #20b2aa; border-radius: 35px; color: #ffffff; } .reg_1 { text-align: center; margin: auto; margin-top: 50%; } .reg_1 h2 { font-weight: 700; } .reg_1 p { margin: 15px 0px 25px 0px; } .sig { width: 70px; height: 30px; border-radius: 12px; background-color: #20b2aa; border-color: #fff; color: #ffffff; } #tiao { padding: 0em 0; } .reg_1 a { color: #ffffff; } h3 { font-size: 3em; color: black; padding-bottom: 1em; margin: 0; text-align: center; font-family: 'Marvel-Regular'; } .input { margin: 10px 50px; width: 300px; height: 70px; } span { color: #999; font-size: 0.85em; padding-bottom: 0.2em; display: block; text-transform: uppercase; margin-bottom: 4px; } .input-text { border: 1px solid #555; outline-color: #fd9f3e; width: 90%; font-size: 1em; padding: 0.5em; line-height: inherit; } .register-top-grid { color: black; padding-bottom: 1em; margin: 0; font-family: 'Marvel-Regular'; margin: 10px 0; } .text-center { text-align: center; } .tijiao { color: rgb(255， 253， 253); width: 80px; height: 35px; background-color: rgb(241， 52， 10); border: none; }</style> <body> <div class='all'> <div class='log'> <div class='register'> <form> <div class='register-top-grid'> <h3>用户登录</h3> <div class='input'> <span>用户名 <label style='color: red'>* </label></span> <input type='text' v-model='name' placeholder='请输入用户名' class='input-text' /> </div> <div class='input'> <span>密码 <label style='color: red'>*</label></span> <input type='password' v-model='password' placeholder='请输入密码' class='input-text' /> </div> </div> <div class='text-center'> <input type='submit' value='提交' class='tijiao' @click='denglu' /> </div> </form> </div> </div> <div class='reg'> <div class='reg_1'> <h2>没有账号？</h2> <p>立即注册加入我们吧，和我们一起开启旅程吧</p> <a href='/register.html'> <button type='primary' class='sig'>注册</button> </a> </div> </div> </div> </body></html>7.效果图：
图片
HTML部分：
<!DOCTYPE html><html> <head> <meta charset='utf-8' /> <title></title> <link rel='stylesheet' href='css/style.css' /> </head> <body> <div class='box'> <span class='borderLine'></span> <form> <h2>登录</h2> <div class='inputBox'> <input type='text' required='required' /> <span>账号：</span><i></i> </div> <div class='inputBox'> <input type='password' required='required' /> <span>密码：</span><i></i> </div> <div class='links'> <a href='#'>忘记密码</a><a href='#'>注册</a> </div> <input type='submit' value='登录'> </form> </div> </body></html>CSS部分：惠州桦岭进出口贸易有限公司
/*设置底色*/*{ margin: 0; padding: 0; font-size: 黑体; box-sizing: border-box;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #222;}/*设置登录盒子的大小和底色*/.box{ position:relative; width: 380px; height: 420px; background: #1c1c1c; border-radius: 8px;}/*开启flex布局，换轴*/.box form{ position:absolute; inset:4px; background: #222; padding: 50px 40px; border-radius: 8px; z-index: 2; display: flex; flex-direction: column;}/*标题文字样式，输入框盒子大小间距*/.box form h2{ color: #fff; font-weight: 500; text-align: center; letter-spacing: 0.lem;}.box form .inputBox{ position: relative; width: 300px; margin-top: 35px;}/*调整输入框样式*/.box form .inputBox input{ position: relative; width: 100%; padding: 20px 10px 10px; background: transparent; outline: none; border: none; box-shadow: none; color: #23242; font-size: 1em; letter-spacing: 0.05em; z-index: 10;}/*提示文字样式*/.box form .inputBox span{ position: absolute; left: 0; padding: 20px 0px 10px; pointer-events: none; color: #8f8f8f; font-size: 1em; letter-spacing: 0.05em;}/*输入有效值获取焦点时样式*/.box form .inputBox input{ transition: 0.5s;}.box form .inputBox span{ transition: 0.5s;}.box form .inputBox input:valid~span，.box form .inputBox input:focus~span{ color: #fff; font-size: 0.75em; transform: translateY(-34px);}/*设置白色下划线，并设置点击穿透*/.box form .inputBox i{ position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #fff; border-radius: 4px; overflow: hidden; transition: 0.5s; pointer-events: none;}/*输入有效值获取焦点时样式*/.box form .inputBox input:valid~i，.box form .inputBox input:focus~i{ height: 44px;}/*开启flex a链接样式*/.box form .links{ display: flex; justify-content: space-between;}.box form .links a{ margin: 10px 0; font-size: 0.75em; color: #8f8f8f; text-decoration: none;}/*a链接hover时改颜色，注册直接改颜色*/.box form .links a:hover，.box form .links a:nth-child(2){ color: #fff;}/*修改登录按钮样式*/.box form input[type='submit']{ border: none; outline: none; padding: 9px 25px; background: #fff; cursor: pointer; font-size: 0.9em; border-radius: 4px; font-weight: 600; width: 100px; margin-top: 10px;}/*登录按钮点击时，透明度80%*/.box form input[type='submit']:active{ opacity: 0.8;}/*写动画*/.borderLine{ position: absolute; top:0; inset:0;}@keyframes animate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }}/*添加动画*/.box::before，.box::after，.borderLine::before，.borderLine::after{ content: ''; position: absolute; top:-50%; width: 380px; height: 420px; background:linear-gradient( 0deg，transparent，transparent， #45f3ff，#45f3ff，#45f3ff); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite;}/*添加动画延迟，修改为两种颜色*/.box::after{ animation-delay: -3s;}.borderLine::before{ background: linear-gradient( 0deg，transparent，transparent， #ff2770，#ff2770，#ff2770); animation-delay: -1.5s;}.borderLine::after{ background: linear-gradient( 0deg，transparent，transparent， #ff2770，#ff2770，#ff2770); animation-delay: -4.5s;}/*退出隐藏*/.box{ overflow: hidden;}8.效果图：
图片
HTML部分：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width， initial-scale=1.0'> <link rel='stylesheet' href='css/logon.css'> <title>登录界面</title></head><body> <section> <!-- 背景颜色 --> <div class='color'></div> <div class='color'></div> <div class='color'></div> <div class='box'> <!-- 背景圆 --> <div class='circle' style='--x:0'></div> <div class='circle' style='--x:1'></div> <div class='circle' style='--x:2'></div> <div class='circle' style='--x:3'></div> <div class='circle' style='--x:4'></div> <!-- 登录框 --> <div class='container'> <div class='form'> <h2>登录</h2> <form> <div class='inputBox'> <input type='text' placeholder='姓名'> </div> <div class='inputBox'> <input type='password' placeholder='密码'> </div> <div class='inputBox'> <input type='submit' value='登录'> </div> <p class='forget'>忘记密码?<a href='#'> 点击这里 </a></p> <p class='forget'>没有账户?<a href='#'> 注册 </a></p> </form> </div> </div> </div> </section></body></html>CSS部分：
/* 清除浏览器默认边距，使边框和内边距的值包含在元素的width和height内 */* { margin: 0; padding: 0; box-sizing: border-box;}/* 使用flex布局，让内容垂直和水平居中 */section { /* 相对定位 */ position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */ background: linear-gradient(to bottom， #f1f4f9， #dff1ff);}/* 背景颜色 */section .color { /* 绝对定位 */ position: absolute; /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/ filter: blur(200px);}/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */section .color:nth-child(1) { top: -350px; width: 600px; height: 600px; background: #ff359b;}section .color:nth-child(2) { bottom: -150px; left: 100px; width: 500px; height: 500px; background: #fffd87;}section .color:nth-child(3) { bottom: 50px; right: 100px; width: 500px; height: 500px; background: #00d2ff;}.box { position: relative;}/* 背景圆样式 */.box .circle { position: absolute; background: rgba(255， 255， 255， 0.1); /* backdrop-filter属性为一个元素后面区域添加模糊效果 */ backdrop-filter: blur(5px); box-shadow: 0 25px 45px rgba(0， 0， 0， 0.1); border: 1px solid rgba(255， 255， 255， 0.5); border-right: 1px solid rgba(255， 255， 255， 0.2); border-bottom: 1px solid rgba(255， 255， 255， 0.2); border-radius: 50%; /* 使用filter(滤镜) 属性，改变颜色。 hue-rotate(deg) 给图像应用色相旋转 calc() 函数用于动态计算长度值 var() 函数调用自定义的CSS属性值x*/ filter: hue-rotate(calc(var(--x) * 70deg)); /* 调用动画animate，需要10s完成动画， linear表示动画从头到尾的速度是相同的， infinite指定动画应该循环播放无限次*/ animation: animate 10s linear infinite; /* 动态计算动画延迟几秒播放 */ animation-delay: calc(var(--x) * -1s);}/* 背景圆动画 */@keyframes animate { 0%， 100%， { transform: translateY(-50px); } 50% { transform: translateY(50px); }}.box .circle:nth-child(1) { top: -50px; right: -60px; width: 100px; height: 100px;}.box .circle:nth-child(2) { top: 150px; left: -100px; width: 120px; height: 120px; z-index: 2;}.box .circle:nth-child(3) { bottom: 50px; right: -60px; width: 80px; height: 80px; z-index: 2;}.box .circle:nth-child(4) { bottom: -80px; left: 100px; width: 60px; height: 60px;}.box .circle:nth-child(5) { top: -80px; left: 140px; width: 60px; height: 60px;}/* 登录框样式 */.container { position: relative; width: 400px; min-height: 400px; background: rgba(255， 255， 255， 0.1); display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); box-shadow: 0 25px 45px rgba(0， 0， 0， 0.1); border: 1px solid rgba(255， 255， 255， 0.5); border-right: 1px solid rgba(255， 255， 255， 0.2); border-bottom: 1px solid rgba(255， 255， 255， 0.2);}.form { position: relative; width: 100%; height: 100%; padding: 50px;}/* 登录标题样式 */.form h2 { position: relative; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: 5px; margin-bottom: 30px; cursor: pointer;}/* 登录标题的下划线样式 */.form h2::before { content: ''; position: absolute; left: 0; bottom: -10px; width: 0px; height: 3px; background: #fff; transition: 0.5s;}.form h2:hover:before { width: 53px;}.form .inputBox { width: 100%; margin-top: 20px;}/* 输入框样式 */.form .inputBox input { width: 100%; padding: 10px 20px; background: rgba(255， 255， 255， 0.2); outline: none; border: none; border-radius: 30px; border: 1px solid rgba(255， 255， 255， 0.5); border-right: 1px solid rgba(255， 255， 255， 0.2); border-bottom: 1px solid rgba(255， 255， 255， 0.2); font-size: 16px; letter-spacing: 1px; color: #fff; box-shadow: 0 5px 15px rgba(0， 0， 0， 0.05);}.form .inputBox input::placeholder { color: #fff;}/* 登录按钮样式 */.form .inputBox input[type='submit'] { background: #fff; color: #666; max-width: 100px; margin-bottom: 20px; font-weight: 600; cursor: pointer;}.forget { margin-top: 6px; color: #fff; letter-spacing: 1px;}.forget a { color: #fff; font-weight: 600; text-decoration: none;}
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。