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. python语言绘图：绘制一组以beta分布为先验，以二项分布为似然的贝叶斯后验分布图

    代码源自: https://github.com/PacktPublishing/Bayesian-Analysis-with-Python ============================= ...

  2. vscode下如何把缩进为2个空格的python项目改为4个空格的缩进

    最近在看老项目的代码,是python2.7年代的项目,那个时候很多的python项目都是使用2个空格,不过现在估计大多数人写python项目都是使用4个空格的了,而我看这两个空格的项目代码也是感觉十分 ...

  3. Docker部署rabbitmq遇到的问题

    1.背景 Docker部署rabbitmq遇到的如下两个问题 问题一:访问交换机时报错 Management API returned status code 500 问题二:访问channel时报错 ...

  4. [学习笔记] hash & kmp & Trie树 - 字符串

    Hash Oulipo 没啥好说的,进制hash板子. #include<bits/stdc++.h> using namespace std; #define ull unsigned ...

  5. 第 111 场双周赛 - 力扣（LeetCode）

    第 111 场双周赛 - 力扣(LeetCode) 2824. 统计和小于目标的下标对数目 - 力扣(LeetCode) 枚举即可 class Solution { public: int count ...

  6. this 之谜揭底：从浅入深理解 JavaScript 中的 this 关键字（二）

    前言 系列首发于公众号『前端进阶圈』 ,若不想错过更多精彩内容,请"星标"一下,敬请关注公众号最新消息. this 之谜揭底:从浅入深理解 JavaScript 中的 this 关 ...

  7. TL431

    1. 设置分流电压VKA 由于分流电压调节器是非理想的: 存在动态电阻ZKA,会导致VREF存在一个偏置电压: ( IKA - INOM ) × ZKA 其中,INOM 是 VKA = VREF 测试 ...

  8. SPI转can芯片CSM300详解以及Linux驱动移植调试笔记

    一.CSM300概述 CSM300(A)系列是一款可以支持 SPI / UART 接口的CAN模块. 1. 简介 CSM300(A)系列隔离 SPI / UART 转 CAN 模块是集成微处理器. C ...

  9. 【CMake系列】02-第一个CMake项目

    本节我们用CMake 构建我们的第一个helloword的项目,从更细的粒度上了解CMake在做什么,对编写CMakeLists.txt 进入初步引入 本专栏的实践代码全部放在 github 上,欢迎 ...

  10. Sql语句的两表联合查询

    string sql = "select mID,mName,mSex,mAge,(select fzName from TxlFenZu where ID=mFenZu) as mFenZ ...