1.整体效果
登录页面是用户旅程的起点，它的设计直接影响着用户对品牌的第一印象。一个具有创新性和视觉吸引力的登录页面可以激发用户的兴趣，提升用户体验。本文将探讨如何利用CSS技术为登录页面添加酷炫的波浪动画效果，这种动态效果不仅能够吸引用户的注意力，还能增强页面的现代感和创意性，从而提升整体的品牌形象。
2.完整代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>波光粼粼登录页面</title> <link rel="stylesheet" type="text/css" href="6_4.css"> </head> <body> <div class="header"> <div class="inner-header"> <div class="login-container"> <h2>登录</h2> <form id="loginForm"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" id="password" name="password" required> </div> <button type="submit">登录</button> </form> <p id="error-message" class="error-message"></p> </div> </div> <!--Waves Container--> <div> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto" > <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" /> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" /> <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" /> <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" /> </g> </svg> </div> <!--Waves end--> </div> </body> </html>
CSS
body { margin: 0; } h1 { font-family: "Lato", sans-serif; font-weight: 300; letter-spacing: 2px; font-size: 48px; } p { font-family: "Lato", sans-serif; letter-spacing: 1px; font-size: 14px; color: #333333; } .header { position: relative; text-align: center; background: linear-gradient( 60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100% ); color: white; } .logo { width: 50px; fill: white; padding-right: 15px; display: inline-block; vertical-align: middle; } .inner-header { height: 75vh; width: 100%; margin: 0; padding: 120px 0 0; box-sizing: border-box; } .flex { /*Flexbox for containers*/ display: flex; justify-content: center; align-items: center; text-align: center; } .waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; /*Fix for safari gap*/ min-height: 100px; max-height: 150px; } .content { position: relative; height: 20vh; text-align: center; background-color: white; } /* Animation */ .parallax > use { animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /*Shrinking for mobile*/ @media (max-width: 768px) { .waves { height: 40px; min-height: 40px; } .content { height: 30vh; } h1 { font-size: 24px; } } .login-container { padding: 20px; border-radius: 25px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; margin: 0 auto 0; text-align: center; } .login-container h2 { margin-bottom: 20px; } .form-group { margin-bottom: 15px; text-align: left; } .form-group label { display: block; margin-bottom: 5px; } .form-group input { width: 100%; padding: 8px; box-sizing: border-box; } button { width: 100%; padding: 10px; background-color: #ed813e; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: #0056b3; } .error-message { color: red; margin-top: 10px; }
