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. Windows使用命令行终止任务

    在Windows操作系统中,可以使用命令提示符(cmd)或Windows PowerShell来查看运行的任务并终止指定的任务.以下是一些常用的命令: 使用命令提示符(cmd) 查看运行的任务: 打开 ...

  2. LVS-TUN隧道模式

    当然可以.以下是按照您的要求整理的表格形式的实验手册: 主机名称 网卡信息 安装应用 系统 Client客户端 192.168.2.101 无 RHEL8/CentOS8 Lvs服务器(DR) DIP ...

  3. tomcat发布两个项目报错webAppKey重复设置

    两个项目的web.xml中都有一个日志监听器配置 <listener> <listener-class> org.springframework.web.util.Log4jC ...

  4. 如何将Linux的NIC 名称更改为 eth0 而不是 enps33 或 enp0s25，只要几秒钟

    概述 我们使用Linux系统,网卡名称通常都是eth0,但是有一些新的linux发行版,网卡名字 enps33 或 enp0s25. peng@ubuntu:~$ ifconfig ens33 Lin ...

  5. .NET8 Blazor 从入门到精通：（三）类库和表单

    目录 Razor 类库 创建 使用 使可路由组件可从 RCL 获取 静态资源 表单 EditForm 标准输入组件 验证 HTML 表单 Razor 类库 这里只对 RCL 创建和使用的做一些简单的概 ...

  6. Mono 现状与未来：从Wine-mono 到.NET 9

    Mono 官网主页[1]和 Mono GitHub 页面今日发布公告[2],微软宣布将 Mono 项目移交给 WineHQ 组织,也就是 Linux 兼容 Windows 应用框架 Wine 的开发团 ...

  7. 关于安装李沐深度学习d2l包报错的解决办法（保姆教程）

    目录 目录:d2l包安装失败的解决过程 前言 一.李沐提供的安装方式 1. 创建一个新的环境 2. 激活 d2l 环境 3. 安装深度学习框架和d2l软件包 3.1 安装PyTorch的CPU或GPU ...

  8. attention, transformers

    这啥呀,慢慢啃 Attention 最初来源于 NLP 机器翻译的 Sequence to Sequence 模型,早先的encoder-decoder结构随着句子长度增加翻译性能会下降,因为模型记不 ...

  9. 详解JVM 内存结构与实战调优总结

    详解JVM 内存结构与实战调优总结 GC优化案例做个总结: 1在进行GC优化之前,需要确认项目的架构和代码等已经没有优化空间.我们不能指望一个系统架构有缺陷或者代码层次优化没有穷尽的应用,通过GC优化 ...

  10. Angular Material 18+ 高级教程 – CDK Overlay

    Overlay, Dialog, Modal, Popover 傻傻分不清楚 参考: Medium – Modal?Dialog?你真的知道他們是什麼嗎? Popups, dialogs, toolt ...