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. Leetcode: 1484. Groups Sold Products By The Date

    题目要求如下: 输入的数据为 要求按照日期查询出每日销售数量及相应产品的名称,并按照字符顺序进行排序. 下面是实现的代码: import pandas as pd def categorize_pro ...

  2. 下一代浏览器和移动自动化测试框架：WebdriverIO

    1.介绍 今天给大家推荐一款基于Node.js编写且号称下一代浏览器和移动自动化测试框架:WebdriverIO 简单来讲:WebdriverIO 是一个开源的自动化测试框架,它允许测试人员使用 No ...

  3. Logtrick

    logtrick的用法与实战 logtrick是我从灵神视频中学习到的,此文章介绍logtrick用法与实践,以及灵神视频中未提到的,我本人总结出来的小技巧 用法 logtrick通常用于求 子数组( ...

  4. Elsa V3学习之脚本

    在前面的文章中,可以看到我们经常使用JS脚本来获取变量的值.在Elsa中是支持多种脚本的,最常用的基本是JS脚本和C#脚本. 本文来介绍以下这两个脚本使用. Javascript 在ELSA中的jav ...

  5. 变分信息瓶颈 (Variational Information Bottleneck) 公式推导

    互信息 互信息用于表示两个随机变量相互依赖的程度.随机变量 \(X\) 和 \(Y\) 的互信息定义为 \[\begin{aligned} I(X, Y) & = \mathrm{KL}[p( ...

  6. Go 互斥锁 Mutex 源码分析 (一)

    0. 前言 锁作为并发编程中的关键一环,是应该要深入掌握的. 1. 锁 1.1 示例 实现锁很简单,示例如下: var global int func main() { var mu sync.Mut ...

  7. iPhone 打不开 Apple News 解决方法

    想看 Apple News,但是在主屏幕找不到,在 App Store 搜索 Apple News 后打开时显示访问控制已启用,然而在设置中检查发现访问控制并没有启用. 经过一番摸索,发现这个访问控制 ...

  8. 自制 ShareLaTeX 镜像

    Overleaf 官方的 sharelatex 镜像的 TeX Live 版本可能较旧,无法安装最新的宏包,并且往往只包含了少量的基础宏包.为了方便使用,我们可以自己构建一个使用最新 TeX Live ...

  9. uni-app 路由封装（简易版）

    在实践运用中,经常需要在路由跳转时判断是否需要登录权限,页面跳转时,添加加在if判断. 插件市场也有一些这种插件,配置也稍微复制,大部分朝向vue-router. 注:本次路由封装,只是单纯的判断是否 ...

  10. FFmpeg开发笔记（四十九）助您在毕业设计中脱颖而出的几个流行APP

    ​对各高校即将毕业的学子来说,毕业设计算是在大学里的最后一个大作业.特别是软件.计算机.电子等相关专业,毕业设计非常讲究实操,往往要求实现一个实用的.可用的.易用的软件系统或手机APP. 不管是软件还 ...