🌟 在本文中，我们将深入探讨如何使用HTML和CSS来设计一个不仅功能完备，而且视觉吸引力十足的登录页面。从布局设计到动画效果，每一步都经过精心策划，以确保用户获得流畅且愉悦的登录体验。文章中不仅介绍了设计理念和实现方法，还提供了完整的源码，供读者学习和直接应用到自己的项目中。
完整代码
部分HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>登录页</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <div class="header"> <h2 class="animation a1">欢迎回来</h2> <h4 class="animation a2">使用电邮及密码登入你的帐户</h4> </div> <div class="form"> <input type="email" class="form-field animation a3" placeholder="邮箱账号"> <input type="password" class="form-field animation a4" placeholder="密码"> <p class="animation a5"><a href="#">忘记密码</a></p> <button class="animation a6">登录</button> </div> </div> <div class="right"></div> </div> </body> </html>
* { box-sizing: border-box; } body { font-family: 'Rubik', sans-serif; margin:0; padding:0; } .container { display: flex; height: 100vh; } .left { overflow: hidden; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; -webkit-animation-name: left; animation-name: left; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; animation-delay: 1s; } .right { flex: 1; background-color: black; transition: 1s; background-image: url(../img/photo.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } .header > h2 { margin: 0; color: #4f46a5; } .header > h4 { margin-top: 10px; font-weight: normal; font-size: 15px; color: rgba(0, 0, 0, 0.4); } .form { max-width: 80%; display: flex; flex-direction: column; } .form > p { text-align: right; } .form > p > a { color: #000; font-size: 14px; } .form-field { height: 46px; padding: 0 16px; border: 2px solid #ddd; border-radius: 4px; font-family: 'Rubik', sans-serif; outline: 0; transition: .2s; margin-top: 20px; } .form-field:focus { border-color: #0f7ef1; } .form > button { padding: 12px 10px; border: 0; background: linear-gradient(to right, #de48b5 0%, #0097ff 100%); border-radius: 3px; margin-top: 10px; color: #fff; letter-spacing: 1px; font-family: 'Rubik', sans-serif; cursor:pointer; } .animation { -webkit-animation-name: move; animation-name: move; -webkit-animation-duration: .4s; animation-duration: .4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 2s; animation-delay: 2s; } .a1 { -webkit-animation-delay: 2s; animation-delay: 2s; } .a2 { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } .a3 { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; } .a4 { -webkit-animation-delay: 2.3s; animation-delay: 2.3s; } .a5 { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .a6 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } @-webkit-keyframes move { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateY(-40px); transform: translateY(-40px); } 100% { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes move { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateY(-40px); transform: translateY(-40px); } 100% { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes left { 0% { opacity: 0; width: 0; } 100% { opacity: 1; padding: 20px 40px; width: 440px; } } @keyframes left { 0% { opacity: 0; width: 0; } 100% { opacity: 1; padding: 20px 40px; width: 440px; } }
