CSS动画效果（炫酷登录页面）
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动画效果（炫酷登录页面）的更多相关文章
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
- CSS动画效果
CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...
- 利用CSS变量实现炫酷的悬浮效果
最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...
- 强大的scrollReveal库，炫酷的页面缓入效果。
首先我问来看一下这个强大的插件能做出什么效果,下面是我找的一个网站: http://kepler.gl/#/, 接下来看看官网给出的效果:https://scrollrevealjs.org/. 是不 ...
- Android ViewPager+属性动画 实现炫酷视差动画效果
ViewPager有一个setPageTransform()方法可以实现很多酷炫的动画效果 先来个仿QQ的侧滑面板效果 vp.setPageTransformer(true, new PageTran ...
- 【动画消消乐｜CSS】086.炫酷水波浪Loading过渡动画
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- 运动曲线提升CSS动画效果
原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...
随机推荐
- nvme硬盘的断电保护是否有用，是噱头、智商税还是真的有需要？购买DOCKCASE智能M2固态硬盘盒10秒保护
最近在某东上买了一个10秒断电保护的nvme硬盘,其实对于这个断电保护有用没有用我是不懂的,也是不care的,买这个硬盘盒主要就是为了这个屏幕去的,不过东西到手后我就开始思考这个断电保护到底有用没有用 ...
- 强化学习分布式经验回放框架（experience replay）reverb的安装
框架reverb的相关介绍: https://www.cnblogs.com/devilmaycry812839668/p/16260799.html ======================== ...
- Linux系统中目录和文件夹是一个东西吗
目录和文件夹的区别 在阐述Linux系统的目录前,我们先来回忆一下现实中的目录和文件夹是什么: 在现实中,文件夹(封套)可以用来保存几个文件(或其他项目).而目录则可以用来维护项目的索引,这样 ...
- Pintia 天梯地图 dijkstra进阶
7-14 天梯地图 - SMU 2024 spring 天梯赛3(补题) (pintia.cn) dijkstra进阶做法,包含路径记录,以及按权重统计路径条件等; 不过最开始我一直将优先队列开的最大 ...
- Binance 如何使用 Quickwit 构建 100PB 日志服务(Quickwit 博客)
三年前,我们开源了 Quickwit,一个面向大规模数据集的分布式搜索引擎.我们的目标很宏大:创建一种全新的全文搜索引擎,其成本效率比 Elasticsearch 高十倍,配置和管理显著更简单,并且能 ...
- GC终结标记 SuspendEE 是怎么回事
一:背景 1. 讲故事 写这篇是起源于训练营里有位朋友提到了一个问题,在 !t -special 输出中有一个 SuspendEE 字样,这个字样在 coreclr 中怎么弄的?输出如下: 0:000 ...
- 单例模式C++实现
单例模式 全局静态变量实现饿汉式单例模式 饿汉式实现方式是线程安全的. #include using namespace std; /* 饿汉式单例模式 */ class SingleObject{ ...
- Ubuntu 设置 SMB 服务
安装 Samba 包 sudo apt install samba samba-common 创建用于 SMB 共享的文件夹 sudo mkdir /usr/local/volumes # 新建用于共 ...
- 【Docker】之重启容器相关命令
我想每次打开电脑,只要自动运行docker的时候,马上把设置指定的容器也自动运行起来. 首先查看一下容器启动情况: # 查看docker运行命令 docker ps -a --restart参数有3个 ...
- Java并非锁之独占非公平锁理解
Java锁系列教程之独占式锁 在Java并发编程中,锁是一个很重要的对象.Java中锁有两种:隐式锁和显式锁.使用synchronized关键字的锁是隐式锁.因为锁的申请和释放都是由JVM来维护的,不 ...