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. java:找不到符号(使用lombok)

    1.背景 启动报错: Error:(76, 34) java: 找不到符号 符号: 方法 getOrderNo() 位置: 类型为XXXXX.request.coupon.SubmitOrderObj ...

  2. Two Sided Cards 题解

    前言 五一网课的例题,但是网上没有详细的题解(真的连题解都找不到啊),所以来写一篇,就当攒 RP 了.题目可以在这里提交.原题是 TopCoder - 10947,但是有了账号也交不了? 题目简述 有 ...

  3. 手把手教你掌握SeaTunnel k8s运行Zeta引擎本地模式的技巧

    转载自小虾米0.0 导读:随着Kubernetes的普及和发展,越来越多的企业和团队开始使用Kubernetes来管理和部署应用程序.然而,Kubernetes的默认工作方式可能不是最佳的选择,尤其是 ...

  4. 通过内存映射的方式向lcd屏幕输出几个圆

    /************************************************* * * file name:color.c * author :momolyl@126.com * ...

  5. 卷积神经网络CNN实战：MINST手写数字识别——调用模型/模型预测

    import torch import torchvision.transforms as transforms from PIL import Image import numpy as np im ...

  6. “vscode #include 错误”的问题解决办法

    确定gcc没问题的情况下 打开这个文件 把linux下的文件直接复制过来 然后加上路径就OK了

  7. Mac 右键菜单中出现多个 Edge 版本解决方法

    cd "/Applications/Microsoft Edge.app/Contents/Frameworks/Microsoft Edge Framework.framework/Ver ...

  8. Kubernetes-3.2：kubespray安装高可用k8sv1.20.2集群及常见报错解决

    kubespray安装高可用k8s集群 环境介绍 系统环境 主机名 / IP地址 角色 内核版本 CentOS 7.6.1810 master1 / 192.168.181.252 master &a ...

  9. 所见即所得，赋能RAG：PDF解析里的段落识别

    前几天,有一位用户使用OCR产品识别多栏论文后向我们询问:要怎么解决不合适的断句.分段以及错误阅读顺序的问题? 我们用一个相似案例为大家直观展示这位用户遇到的情况. 如图中的多栏期刊,如果用OCR识别 ...

  10. RxJS 系列 – 概念篇

    前言 很长一段时间没有写 Angular 了 (哎...全栈的命),近期计划又要开始回去写了,于是就开始做复习咯. 我的复习是从 JS > TS > RxJS > Angular,与 ...