CSS动画（登录页面）

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6Pfop3IiakrZOtiaiaKniaxeH2Gs407DmkXPsMo8AFKdsYibYcpZiboc24Ulic2CicmyvHmnwCrib7MDe6Jvg/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

2.完整代码

HTML

<!DOCTYPE html>

<html lang="en">  

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> </title>

    <link rel="stylesheet" type="text/css" href="6_16.css">

</head>

<body>

<section>

    <!-- 背景颜色 -->

    <div class="color"></div>

    <div class="color"></div>

    <div class="color"></div>

    <div class="box">

        <!-- 背景圆 -->

        <div class="circle" style="--x:0"></div>

        <div class="circle" style="--x:1"></div>

        <div class="circle" style="--x:2"></div>

        <div class="circle" style="--x:3"></div>

        <div class="circle" style="--x:4"></div>

        <!-- 登录框 -->

        <div class="conMain">

            <div class="form">

                <h2>登录</h2>

                <form>

                    <div class="inputBox">

                        <input type="text" placeholder="姓名">  

                    </div>

                    <div class="inputBox">

                        <input type="password" placeholder="密码">  

                    </div>

                    <div class="inputBox">

                        <input type="submit" value="登录">  

                    </div>

                    <p class="forget">忘记密码?<a href="#">

                        点击这里

                    </a></p>

                    <p class="forget">没有账户?<a href="#">

                        注册

                    </a></p>

                </form>

            </div>

        </div>

    </div>

</section>

</body>  

</html>

CSS

/* 清除浏览器默认边距，

使边框和内边距的值包含在元素的width和height内 */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}  

/* 使用flex布局，让内容垂直和水平居中 */

section {

    /* 相对定位 */    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);

}  

/* 背景颜色 */

section .color {

    /* 绝对定位 */    position: absolute;

    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/

    filter: blur(200px);

}  

/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

section .color:nth-child(1) {

    top: -350px;

    width: 600px;

    height: 600px;

    background: #ff359b;

}  

section .color:nth-child(2) {

    bottom: -150px;

    left: 100px;

    width: 500px;

    height: 500px;

    background: #fffd87;

}  

section .color:nth-child(3) {

    bottom: 50px;

    right: 100px;

    width: 500px;

    height: 500px;

    background: #00d2ff;

}  

.box {

    position: relative;

}  

/* 背景圆样式 */

.box .circle {

    position: absolute;

    background: rgba(255, 255, 255, 0.1);

    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */    backdrop-filter: blur(5px);

    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-right: 1px solid rgba(255, 255, 255, 0.2);

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    /* 使用filter(滤镜) 属性，改变颜色。

    hue-rotate(deg) 给图像应用色相旋转

    calc() 函数用于动态计算长度值

    var() 函数调用自定义的CSS属性值x*/

    filter: hue-rotate(calc(var(--x) * 70deg));

    /* 调用动画animate，需要10s完成动画，

    linear表示动画从头到尾的速度是相同的，

    infinite指定动画应该循环播放无限次*/

    animation: animate 10s linear infinite;

    /* 动态计算动画延迟几秒播放 */    animation-delay: calc(var(--x) * -1s);

}  

/* 背景圆动画 */

@keyframes animate {

    0%, 100%, {

        transform: translateY(-50px);

    }

    50% {

        transform: translateY(50px);

    }

}  

.box .circle:nth-child(1) {

    top: -50px;

    right: -60px;

    width: 100px;

    height: 100px;

}  

.box .circle:nth-child(2) {

    top: 150px;

    left: -100px;

    width: 120px;

    height: 120px;

    z-index: 2;

}  

.box .circle:nth-child(3) {

    bottom: 50px;

    right: -60px;

    width: 80px;

    height: 80px;

    z-index: 2;

}  

.box .circle:nth-child(4) {

    bottom: -80px;

    left: 100px;

    width: 60px;

    height: 60px;

}  

.box .circle:nth-child(5) {

    top: -80px;

    left: 140px;

    width: 60px;

    height: 60px;

}  

/* 登录框样式 */

.conMain {

    position: relative;

    width: 400px;

    min-height: 400px;

    background: rgba(255, 255, 255, 0.1);

    display: flex;

    justify-content: center;

    align-items: center;

    backdrop-filter: blur(5px);

    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-right: 1px solid rgba(255, 255, 255, 0.2);

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}  

.form {

    position: relative;

    width: 100%;

    height: 100%;

    padding: 50px;

}  

/* 登录标题样式 */

.form h2 {

    position: relative;

    color: #fff;

    font-size: 24px;

    font-weight: 600;

    letter-spacing: 5px;

    margin-bottom: 30px;

    cursor: pointer;

}  

/* 登录标题的下划线样式 */

.form h2::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 0px;

    height: 3px;

    background: #fff;

    transition: 0.5s;

}  

.form h2:hover:before {

    width: 53px;

}  

.form .inputBox {

    width: 100%;

    margin-top: 20px;

}  

/* 输入框样式 */

.form .inputBox input {

    width: 100%;

    padding: 10px 20px;

    background: rgba(255, 255, 255, 0.2);

    outline: none;

    border: none;

    border-radius: 30px;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-right: 1px solid rgba(255, 255, 255, 0.2);

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    font-size: 16px;

    letter-spacing: 1px;

    color: #fff;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

}  

.form .inputBox input::placeholder {

    color: #fff;

}  

/* 登录按钮样式 */

.form .inputBox input[type="submit"] {

    background: #fff;

    color: #666;

    max-width: 100px;

    margin-bottom: 20px;

    font-weight: 600;

    cursor: pointer;

}  

.forget {

    margin-top: 6px;

    color: #fff;

    letter-spacing: 1px;

}  

.forget a {

    color: #fff;

    font-weight: 600;

    text-decoration: none;

}

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

原生js+css实现重力模拟弹跳系统的登录页面
今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...
wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...
如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
HTML+CSS仿写的登录页面
仿写的登录页面使用HTML+CSS,感觉很简单,记录下话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> & ...
梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
css动画属性性能
性能主要表现:流量.功耗与流畅度在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
css动画与js动画的区别
CSS动画优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
CSS动画与GPU
写在前面满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

随机推荐

JUC高并发编程(二)之多线程下载支付宝对账文件
1.背景在实际开发中,经常会遇到支付需求,当然就会有支付对账的需求.... 2.项目结构 3.代码 3.1.线程池配置对象 @Configuration @EnableAsync public cl ...
【Azure Developer】使用Python SDK去Azure Container Instance服务的Execute命令的疑问解释
Azure Container Instance服务介绍 Azure 容器实例(Azure Container Instances,简称 ACI)是一个无服务器容器解决方案,允许用户在 Azure 云 ...
SMU Summer 2024 Contest Round 3
SMU Summer 2024 Contest Round 3 寻找素数对题意给你一个偶数,找到两个最接近的素数,其和等于该偶数. 思路处理出 1e5 以内的素数,然后遍历,更新最接近的答案. ...
记一次解决OTA死机重启bug，如何分析与解决措施？！
背景: 平台:stm32mp151平台什么是OTA? 说起OTA我们应该都不陌生,它是一种可以为设备无损失升级系统的方式,能将新功能远程部署到产品上. 我们不仅可以通过网络下载OTA升级包,也可以通 ...
MFC中CString转int,double
CString str=L"123"; int n=_wtoi(str); //n=123 double d=_wtof(str); //d=123.0000 Vs2012中编译
ubuntu16.04/CentOS 7自动以root身份登录桌面
ubuntu16.04 1.首先设置root用户密码: # sudo passwd root 输入普通用户密码,再输入root用户密码: 2.启用登录时的root选项: # 编辑50-ubuntu.c ...
Es java API官网手册
官方地址: 一.TransportClient客户端 https://www.elastic.co/guide/en/elasticsearch/client/java-api/7.5/index.h ...
Ansible-playbook 应用梳理
前面已经介绍过Ansible的安装配置及常见模块的使用 --<Linux下使用Ansible处理批量操作> Palybook简介 palybook是由一个或多个paly组成的列表,play ...
Android Adapter中组件EditText文本变化监听 addTextChangedListener
问题背景:使用适配器显示一个列表,列表中Item中有EditText,滚动时会有EditText组件内容消失步骤: 1. 在Adapter中,添加interface public interface ...
LLM
LangChain 是啥,能干啥? AutoChain 又是啥近年来的LLM模型 LLM 都是基于transformers 结构的,具体又分为 Encoder-only(Autoencoding), ...

CSS动画（登录页面）

1.整体效果

2.完整代码

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

随机推荐

热门专题