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. docker 常用工具

    windows 下常常需要linux环境 直接安装虚拟机不方便也浪费资源 所以直接在docker下安装一个centos 然后搭建好开发环境就是个不错的办法 一.Linux 环境 1.安装centos ...

  2. 社区6月月报 | Apache DolphinScheduler重要修复和优化记录

    各位热爱Apache DolphinScheduler的小伙伴们,社区6月月报更新啦!这里将记录Apache DolphinScheduler社区每月的重要更新,欢迎关注. 月度Merge Stars ...

  3. zynq QSPI flash分区设置&启动配置

    需求: 一款基于zynq架构的产品,只有qspi flash,并没有其他的存储设备, 现在的要求固化某个应用程序app,设置开机启动, 但是根据厂家提供的sdk,编译出的镜像重启后,文件系统的内容都会 ...

  4. Telegram第三方登录步骤

    网上看到的不多,简单做个记录,本文主要对下面的文章做补充 Telegram(电报)授权登录(web)第三方 整体步骤为: 找 botFather 创建机器人 给机器人设置域名白名单,用于设置回调地址, ...

  5. 解决 Rust WebAssembly 启动 Web 程序报错

    当你艰难入门 Rust ,并满怀斗志准备投身 WebAssembly,第一课也许会先给你泼盆凉水. 跟随 <Rust 和 WebAssembly> 文档的指引,一路 install.cod ...

  6. TeX Live 安装

    Ubuntu sudo apt install texlive-full 其他可用软件包: 软件包 压缩包 磁盘空间 texlive-latex-base 59 MB 216 MB texlive-l ...

  7. Visual Studio Code 配置文件关联

    在编写 Linux 的 .service 文件的时候,我发现 .service 文件的本质是 INI 文件.然而 VS Code 却并没有使用 INI 格式进行语法高亮.于是我通过如下设置使 VS C ...

  8. Mysql table 调整table的字符集和校对规则

    ALTER TABLE `xxxx`.`xxx` CHARACTER SET = utf8mb4 , COLLATE = utf8mb4_0900_ai_ci ;

  9. 为什么MySQL 默认隔离级别是RR，又被阿里设置为RC

    我们知道,我们可以通过这个命令查看数据库当前的隔离级别,MySQL 默认隔离级别是RR. select @@tx_isolation; ANSI/ISO SQL定义的标准隔离级别有四种,从高到底依次为 ...

  10. C#自定义控件—指示灯

    C#用户控件之指示灯 在体现通讯状态.运行状态等用一个靓眼的指示灯如何做? 思路(GDI) 外环用笔绘制(Pen),内圆用画刷(SolidBrush); 两个方法(用笔画圆,用画刷填充圆的内部): 绘 ...