夜雨聆风
效果展示
完整源码
<!DOCTYPE html><html ><head><metacharset="UTF-8"><title>漂亮的css登录页面模板代码</title><linkrel='stylesheet'href='https://use.fontawesome.com/releases/v5.2.0/css/all.css'><linkrel='stylesheet'href='https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css'><linkrel="stylesheet"href="./style.css"></head><body><!-- partial:index.partial.html --><divclass="container"><divclass="screen"><divclass="screen__content"><formclass="login"><divclass="login__field"><iclass="login__icon fas fa-user"></i><inputtype="text"class="login__input"placeholder="用户名 / Email"></div><divclass="login__field"><iclass="login__icon fas fa-lock"></i><inputtype="password"class="login__input"placeholder="密码"></div><buttonclass="button login__submit"><spanclass="button__text">立即登录</span><iclass="button__icon fas fa-chevron-right"></i></button></form><divclass="social-login"><h3>第三方账号</h3><divclass="social-icons"><ahref="#"class="social-login__icon fab fa-qq"></a><ahref="#"class="social-login__icon fab fa-weibo"></a><ahref="#"class="social-login__icon fab fa-twitter"></a></div></div></div><divclass="screen__background"><spanclass="screen__background__shape screen__background__shape4"></span><spanclass="screen__background__shape screen__background__shape3"></span><spanclass="screen__background__shape screen__background__shape2"></span><spanclass="screen__background__shape screen__background__shape1"></span></div></div></div><!-- partial --></body></html>
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');* {box-sizing: border-box;margin: 0;padding: 0;font-family: Raleway, sans-serif;}body {background: linear-gradient(90deg, #C7C5F4, #776BCC);}.container {display: flex;align-items: center;justify-content: center;min-height: 100vh;}.screen {background: linear-gradient(90deg, #5D54A4, #7C78B8);position: relative;height: 600px;width: 360px;box-shadow: 0px 0px 24px #5C5696;}.screen__content {z-index: 1;position: relative;height: 100%;}.screen__background {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 0;-webkit-clip-path: inset(0 0 0 0);clip-path: inset(0 0 0 0);}.screen__background__shape {transform: rotate(45deg);position: absolute;}.screen__background__shape1 {height: 520px;width: 520px;background: #FFF;top: -50px;right: 120px;border-radius: 0 72px 0 0;}.screen__background__shape2 {height: 220px;width: 220px;background: #6C63AC;top: -172px;right: 0;border-radius: 32px;}.screen__background__shape3 {height: 540px;width: 190px;background: linear-gradient(270deg, #5D54A4, #6A679E);top: -24px;right: 0;border-radius: 32px;}.screen__background__shape4 {height: 400px;width: 200px;background: #7E7BB9;top: 420px;right: 50px;border-radius: 60px;}.login {width: 320px;padding: 30px;padding-top: 156px;}.login__field {padding: 20px 0px;position: relative;}.login__icon {position: absolute;top: 30px;color: #7875B5;}.login__input {border: none;border-bottom: 2px solid #D1D1D4;background: none;padding: 10px;padding-left: 24px;font-weight: 700;width: 75%;transition: .2s;}.login__input:active,.login__input:focus,.login__input:hover {outline: none;border-bottom-color: #6A679E;}.login__submit {background: #fff;font-size: 14px;margin-top: 30px;padding: 16px 20px;border-radius: 26px;border: 1px solid #D4D3E8;text-transform: uppercase;font-weight: 700;display: flex;align-items: center;width: 100%;color: #4C489D;box-shadow: 0px 2px 2px #5C5696;cursor: pointer;transition: .2s;}.login__submit:active,.login__submit:focus,.login__submit:hover {border-color: #6A679E;outline: none;}.button__icon {font-size: 24px;margin-left: auto;color: #7875B5;}.social-login {position: absolute;height: 140px;width: 160px;text-align: center;bottom: 0px;right: 0px;color: #fff;}.social-icons {display: flex;align-items: center;justify-content: center;}.social-login__icon {padding: 20px 10px;color: #fff;text-decoration: none;text-shadow: 0px 0px 8px #7875B5;}.social-login__icon:hover {transform: scale(1.5);}