1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6ibiceejK9loT70yREYASOhuSRaI6vQtQ42zN48oafaWDzdndicRuicL31ZuK3mhD82oJThcFHYuSCkw/640?wx_fmt=gif&from=appmsg&wxfrom=13

一个酷炫的登录页不仅能够吸引用户的注意力，还能够提升品牌形象，增加用户的信任感。CSS动画效果的引入，可以为登录页增添活力，创造更加动态和互动的用户体验。本文将探讨如何使用CSS来实现各种动画效果，从微妙的背景渐变到引人注目的登录框动画，一步步指导您打造出一个既美观又实用的酷炫登录页。

2.完整代码

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="ring">

    <i style="--clr:#ffd500;"></i>

    <i style="--clr:#ff0057;"></i>

    <i style="--clr:#084ee3;"></i>

    <div class="login">

        <h2>用户登录系统</h2>

        <div class="inputBx">

            <input type="text" placeholder="用户名">

        </div>        <div class="inputBx">

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

        </div>        <div class="inputBx">

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

        </div>        <div class="links">

            <a href="#">记住密码</a>

            <a href="#">忘记密码</a>

        </div>    </div></div>

</body>

</html>

CSS

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Quicksand", sans-serif;

}

body {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background: #111;

    width: 100%;

    overflow: hidden;

}

.ring {

    position: relative;

    width: 500px;

    height: 500px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.ring i {

    position: absolute;

    inset: 0;

    border: 2px solid #fff;

    transition: 0.5s;

}

.ring i:nth-child(1) {

    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;

    animation: animate 6s linear infinite;

}

.ring i:nth-child(2) {

    border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;

    animation: animate 4s linear infinite;

}

.ring i:nth-child(3) {

    border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;

    animation: animate2 10s linear infinite;

}

.ring:hover i {

    border: 6px solid var(--clr);

    filter: drop-shadow(0 0 20px var(--clr));

}

@keyframes animate {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}

@keyframes animate2 {

    0% {

        transform: rotate(360deg);

    }

    100% {

        transform: rotate(0deg);

    }

}

.login {

    position: absolute;

    width: 300px;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    gap: 20px;

}

.login h2 {

    font-size: 2em;

    color: #fff;

}

.login .inputBx {

    position: relative;

    width: 100%;

}

.login .inputBx input {

    position: relative;

    width: 100%;

    padding: 12px 20px;

    background: transparent;

    border: 2px solid #fff;

    border-radius: 40px;

    font-size: 1.2em;

    color: #fff;

    box-shadow: none;

    outline: none;

}

.login .inputBx input[type="submit"] {

    width: 100%;

    background: #0078ff;

    background: linear-gradient(45deg, #ff357a, #fff172);

    border: none;

    cursor: pointer;

}

.login .inputBx input::placeholder {

    color: rgba(255, 255, 255, 0.75);

}

.login .links {

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 20px;

}

.login .links a {

    color: #fff;

    text-decoration: none;

}

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

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  4. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  5. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  6. 利用CSS变量实现炫酷的悬浮效果

    最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...

  7. 强大的scrollReveal库，炫酷的页面缓入效果。

    首先我问来看一下这个强大的插件能做出什么效果,下面是我找的一个网站: http://kepler.gl/#/, 接下来看看官网给出的效果:https://scrollrevealjs.org/. 是不 ...

  8. Android ViewPager+属性动画 实现炫酷视差动画效果

    ViewPager有一个setPageTransform()方法可以实现很多酷炫的动画效果 先来个仿QQ的侧滑面板效果 vp.setPageTransformer(true, new PageTran ...

  9. 【动画消消乐｜CSS】086.炫酷水波浪Loading过渡动画

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  10. 运动曲线提升CSS动画效果

    原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...

随机推荐

  1. 【转载】Ubuntu20.04安装Bazel

    原文地址: https://zhuanlan.zhihu.com/p/311406177 ====================================== sudo apt install ...

  2. [rCore学习笔记 023]任务切换

    导读 还是要先看官方手册. 学过DMA的同志可能比较好理解,一句话, 释放CPU总线 : 如果把应用程序执行的整个过程进行进一步分析,可以看到,当程序访问 I/O 外设或睡眠时,其实是不需要占用处理器 ...

  3. MySQL手动执行rollback，内部实现分析

    -- 测试手动回滚操作 -- 1手动开启事务 START TRANSACTION -- 2执行更新操作语句 UPDATE FraBakNtuAnalysize SET IsDeleted = 0 WH ...

  4. 解决 Docker CE 在无根模式（rootless）下无法通过 IPv6 拉取映像的问题

    折腾一天快把我逼疯了 本来 Docker 对 IPv6 的支持就不好,再来个 rootless,雪上加霜 首先,我们要区分 Docker Engine 和 里面的 Image. 拉取映像是 Docke ...

  5. Linux内核信号SIGIO使用实例讲解

    一.信号 1. 基本概念 信号是在软件层次上对中断机制的一种模拟,在原理上,一个进程收到一个信号与处理器收到一个中断请求可以说是一样的.信号是异步的,一个进程不必通过任何操作来等待信号的到达,事实上, ...

  6. jpa 查询 报错 EntityNotFoundException

    背景: 使用JPA查询,串接到另外一张表时,由于没有实际在表格关系中指定外键,而是在实体类中指定外键 导致关联表中的数据被删除时,JPA查询时,报错EntityNotFoundException 方案 ...

  7. c# RSA加密解密，与java代码互通问题

    RSA加密解密原本是公开算法,但是和一个java的小伙伴对接却出现了点问题,现在记录一下 首先,RSA的公钥私钥,有2种: 1.pem格式. 2.xml格式. 文章底部有pem格式和对应的xml样本数 ...

  8. Serilog文档翻译系列（二） - 设置AspNetCore应用程序

    Serilog 日志记录适用于 ASP.NET Core.此包将 ASP.NET Core 的日志消息通过 Serilog 进行路由,使你可以将有关 ASP.NET 内部操作的信息写入与应用程序事件相 ...

  9. Round #2022/12/03

    问题 B: 约数个数 题目描述 有 \(t\) 次询问,每次给你一个数 \(n\) ,求在 \([1,n]\) 内约数个数最多的数的约数个数. 输入 第一行一个正整数 \(t\) . 之后 \(t\) ...

  10. Transforms的使用

    Transform的作用 把图片经过Transforms的一些函数之后就会对图片进行一些变化.比如,resize就是改变其大小,totensor就是把图片PIL或者numpy类型转化为Tensor类型 ...