CSS动画（波光粼粼登录页面）

写代码的大学生

于 2024-06-04 18:14:27 发布

阅读量722

点赞数 18

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_82176667/article/details/139450689

版权

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa4AbemkU3vLRIDzTIgPHSjicia97wfvMVAhqZL4lsGbQQCbsVKaNGic2ImwHL0icQicbnwmicRmUSzGUYuA/640?wx_fmt=gif&from=appmsg&wxfrom=13

登录页面是用户旅程的起点，它的设计直接影响着用户对品牌的第一印象。一个具有创新性和视觉吸引力的登录页面可以激发用户的兴趣，提升用户体验。本文将探讨如何利用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;  
}

写代码的大学生

关注

18
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS动画（波光粼粼登录页面）

登录页面是用户旅程的起点，它的设计直接影响着用户对品牌的第一印象。一个具有创新性和视觉吸引力的登录页面可以激发用户的兴趣，提升用户体验。本文将探讨如何利用CSS技术为登录页面添加酷炫的波浪动画效果，这种动态效果不仅能够吸引用户的注意力，还能增强页面的现代感和创意性，从而提升整体的品牌形象。
复制链接

扫一扫