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. 再探 游戏 《 2048 》 —— AI方法—— 缘起、缘灭（6） —— Python版本实现的《2048》游戏环境运行性能对比

    <2048>游戏在线试玩地址: https://play2048.co/ 如何解决<2048>游戏源于外网的一个讨论帖子,而这个帖子则是讨论如何解决该游戏的最早开始,可谓是&q ...

  2. [BJOI2016] IP地址 题解

    前言 来个不一样的做法,用到了 Trie 树和主席树,并且是可爱的在线算法. 题目链接:洛谷. 题目分析 对于一个查询 \(\texttt{ip}\),只考虑所有前缀字符串规则.以时间建里横轴,匹配长 ...

  3. Java IO 流详解

    概述 流是一个抽象的概念,代表了数据的无结构化传递.流的本质是数据在不同设备之间的传输.在 Java 中,数据的读取和写入都是以流的方式进行的 在 Java 中,根据数据流向的不同,可以将流分为输入( ...

  4. .NET8 Blazor 从入门到精通：（二）组件

    目录 Blazor 组件 基础 路由 参数 组件参数 路由参数 生命周期事件 状态更改 组件事件 Blazor 组件 基础 新建一个项目命名为 MyComponents ,项目模板的交互类型选 Aut ...

  5. Win32封装对话框类

    [主程序入口.cpp] #include <windows.h> #include <tchar.h> #include "resource.h" #inc ...

  6. mysql学习问题记录

    Q: 问题 MySQL在创建外键索引时,使用工具会出现创建完成但是闪一下就没了 使用CONSTRAINT '外键索引名' FOREIGN KEY ('xx') REFERENCES 数据库名 (xx) ...

  7. Ubuntu 安装基于 DEB 的 Firefox

    自从 Canonical 推出了 Snap 之后,在所有新推出的 Ubuntu 发行版中都预装了 Snap 版的 Firefox,并将 APT 中的 Firefox 包指向了 Snap 的 Firef ...

  8. chmod 使用

    数字 权限 4 (100) 读 2 (010) 写 1 (001) 执行 u 表示该文件的拥有者,g 表示该文件的拥有者所属的组,o 表示其他人,a 表示所有人. e.g. # 数字表示法 chmod ...

  9. C#项目—模拟考试

    C#模拟考试软件 开发了一个<模拟考试>的小软件,此小软件练习的目的主要是为了体会编程思想,深度理解高内聚.低耦合,掌握编程思维逻辑的大招,告别垃圾代码,重点体会编程之美,练习时长30分钟 ...

  10. 进行中 10% 手机Root安装银河麒麟ARM系统，或其它的CentOS系统

    计划中: 预计开始时间: 最早开始3/12 预计结束时间:最早3/13号 计划过程: 1. 手机root 2. 安装系统 目前:1. 我的旧旧旧手机,是红米note5,然后我进了官网,想要解锁, 解锁 ...