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. 解决CGLib动态代理测试不通过-Unable to load cache item

    1.背景 在学习aop底层时遇到的问题,做个小结 2.现象 动态代理代码如下: package com.ldp.proxy; import net.sf.cglib.proxy.Enhancer; i ...

  2. uview-ui toast 二次封装

    开发用到uview 的toast 很常用的内容使用却很繁琐 所以做了简单封装方便使用 前后对比: this.$refs.uToast.show({ type: 'success', title: '成 ...

  3. MySQL 5.7 DDL 与 GH-OST 对比分析

    作者:来自 vivo 互联网存储研发团队- Xia Qianyong 本文首先介绍MySQL 5.7 DDL以及GH-OST的原理,然后从效率.空间占用.锁阻塞.binlog日志产生量.主备延时等方面 ...

  4. 最短小精悍的js数组打乱顺序

          let number = [1, 45, 13, 17];       // 封装一个打乱数组的方法       function getarr(arr) {         return ...

  5. kubeadm升级k8s之1.23.17->1.24.17

    查看当前版本 [root@k8s-master31 ~]# kubectl get nodes -o wide NAME STATUS ROLES AGE VERSION INTERNAL-IP EX ...

  6. manim边学边做--直线类

    直线是最常用的二维结构,也是构造其他二维图形的基础.manim中针对线性结构提供了很多模块,本篇主要介绍常用的几个直线类的模块. Line:通用直线 DashedLine:各种类型的虚线 Tangen ...

  7. kube-flannel.yml

    --- apiVersion: policy/v1beta1 kind: PodSecurityPolicy metadata: name: psp.flannel.unprivileged anno ...

  8. 树上倍增求 LCA 模板

    void dfs(int x,int fa,int d){ deep[x]=d;dp[x][0]=fa; for(int i=1;i<=lg2[deep[x]];++i){ dp[x][i]=d ...

  9. 编译 Qt 项目

    参考:Qt 编程指南 一个最小化工作示例:qt-minimal | GitHub 源文件 main.cpp #include <QApplication> #include <QLa ...

  10. Python with 语句的用法

    with 语句是Python中用于简化资源管理的一种语法结构,通常与上下文管理器(Context Manager)一起使用.上下文管理器提供了一种机制,用于确保资源在使用完毕后能够被正确释放,例如文件 ...