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;

}

CSS动画（波光粼粼登录页面）的更多相关文章

  1. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  2. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  3. HTML+CSS仿写的登录页面

    仿写的登录页面 使用HTML+CSS,感觉很简单,记录下 话不多说,直接上代码 <!DOCTYPE html> <html lang="en">     & ...

  4. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  5. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  6. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  7. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  8. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  9. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  10. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

随机推荐

  1. .NET 免费开源工业物联网网关

    前言 IoTClient 是一个针对物联网 (IoT) 领域的开源客户端库,它主要用于实现与各种工业设备之间的通信.这个库是用 C# 编写的,并且基于 .NET Standard 2.0,这意味着可以 ...

  2. SeaTunnel 发布成为 Apache 顶级项目后首个版本 2.3.2，进一步提高 Zeta 引擎稳定性和易用性

    近日,Apache SeaTunnel 正式发布 2.3.2 版本.此时距离上一版本 2.3.1 发布已有两个多月,期间我们收集并根据用户和开发者的反馈,在 2.3.2 版本中对 SeaTunnel ...

  3. 在线flex布局----自己写的一个flex布局的小玩意，需要的私聊加关注0.0

  4. Linux系统中目录和文件夹是一个东西吗

    目录和文件夹的区别   在阐述Linux系统的目录前,我们先来回忆一下现实中的目录和文件夹是什么:   在现实中,文件夹(封套)可以用来保存几个文件(或其他项目).而目录则可以用来维护项目的索引,这样 ...

  5. vite创建的react项目如何兼容低版本安卓，低版本安卓不支持es6语法

    Vite 是一个现代化的前端构建工具,默认情况下,它会生成基于 ES6+ 的代码.这对于大多数现代浏览器来说是没有问题的,但对于一些较旧版本的安卓浏览器可能会遇到兼容性问题. 为了使 Vite 创建的 ...

  6. UCX84X笔记

    1. 管脚定义 COMP: 误差放大器补偿引脚.将外部补偿元件连接到此引脚,以修改误差放大器输出.误差放大器内部有电流限制,因此用户可以通过外部强制COMP接地来命令零占空比. UCx84x系列中的误 ...

  7. Typora 上传到 Github 实现笔记同步管理

    首先在 Github 上 new 一个 repository ,我建的名称是 md_notes 然后在本地 terminal 中启动以下命令新建一个 ssh key  ssh-keygen -o 生成 ...

  8. Make 使用

    GNU Make 参考:Make 命令教程 | 阮一峰的网络日志 Makefile 文件的格式 Makefile 文件由一系列 规则(rules)构成.每条 规则 的形式如下. <target& ...

  9. EF Core – Table / Entity Splitting

    参考 Docs – Advanced table mapping Table Splitting Table Splitting 指的是把一个表映射到多个 Entity,或者反过来说就是把多个 Ent ...

  10. SQL Server 冗余维护

    介绍 冗余是维护的魔鬼, 是性能优化的天使 常见的冗余有 1. computed column 2. principal 的识别字段 3. cross computed 4. cascade soft ...