CSS动画(波光粼粼登录页面)

简介: CSS动画(波光粼粼登录页面)

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;  
}
相关文章
|
5天前
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
30 20
|
5天前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
110 73
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
50 22
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24

热门文章

最新文章