【动画消消乐】HTML+CSS 自定义加载动画 062
效果展示
Demo代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section><span></span></section>
</body>
</html>
CSS
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #ed556a;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
}
span {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
span::before {
content: '';
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: -24px;
animation: loading 2s linear infinite alternate;
}
span::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
animation: loadingx 2s linear infinite alternate;
}
@keyframes loading {
0%, 32% {
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0)
}
33%, 65% {
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0)
}
66%, 99% {
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 0)
}
100% {
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1)
}
}
@keyframes loadingx {
0% {
transform: translate(0, 0) rotateX(0) rotateY(0)
}
33% {
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
}
66% {
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
}
100% {
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
}
}
原理详解
步骤1
使用span标签，设置为
- 相对定位
- 宽度、高度均为48px
- 背景色：goldenrod
span {
width: 48px;
height: 48px;
position: relative;
background-color:goldenrod;
}
效果图如下
步骤2
使用span::before伪元素，设置为
- 绝对定位（left：0 top：-24px）
- 宽度、高度均为24px
- 背景色：白色
span::before {
content: '';
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: -24px;
background-color: white;
}
效果图如下
注：span::before是白色那个方块
步骤3
为span::before添加动画，利用span::before的四个阴影（box-shadow）实现
四个阴影的位置如下：
box-shadow:
/*阴影1*/
0 24px red,
/*阴影2*/
24px 24px orange,
/*阴影3*/
24px 48px yellow,
/*阴影4*/
0px 48px green;
效果图如下
关键有四帧，核心就是每个阴影的显示与否
这里利用rgba()函数，控制每个阴影的显示，这里以假设阴影颜色为白色
- 显示阴影 rgba(255,255,255,1)
- 不显示阴影 rgba(255,255,255,0)
总结：显示与否，就是修改颜色的透明级别。为1，显示；为0，不显示
第一帧
- 阴影1 显示
- 阴影2、3、4 不显示
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
效果图如下
第二帧
- 阴影1、2 显示
- 阴影3、4 不显示
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
效果图如下
第三帧
- 阴影1、2、3 显示
- 阴影4 不显示
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 0);
效果图如下
第四帧
- 阴影1、2、3、4 均显示
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1);
效果图如下
综上，动画为从第一帧平稳过渡至第四帧，之后再回到第一帧
span::before {
animation: loading 2s linear infinite alternate;
}
@keyframes loading {
/*第一帧*/
0% {
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0)
}
/*第二帧*/
33%{
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0)
}
/*第三帧*/
66% {
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 0)
}
/*第四帧*/
100% {
box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1)
}
}
效果图如下
步骤4
在步骤3的基础上，取消span::before的背景色
定义为动画1
效果图如下
步骤5
暂且忽略步骤4产生的动画1
使用span::after伪元素，设置为
- 绝对定位（top：0px left：0px）
- 宽度、高度均为24px
- 背景色：白色 透明级别：0.85
span::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.85);
}
效果图如下
步骤6
为span::after添加动画
有4个关键帧
第一帧（初始状态）
- 二维空间：右移：0 下移：0
- 三维空间：绕x轴旋转0度 绕y轴旋转0度
transform: translate(0, 0) rotateX(0) rotateY(0)
第二帧（相对于初始状态）
- 二维空间：右移：100% 下移：0 （100%是指相对于自身的大小，若自身宽100px 那就移动100px）
- 三维空间：绕x轴旋转0度 绕y轴旋转180度
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
第一帧 过渡至 第二帧 效果图如下
第三帧 （相对于初始状态）
- 二维空间：右移：100% 下移：100%
- 三维空间：绕x轴旋转-180度 绕y轴旋转180度
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
第二帧 过渡至 第三帧 效果图如下
第四帧（相对于初始状态）
- 二维空间：右移：0 下移：100%
- 三维空间：绕x轴旋转-180度 绕y轴旋转360度
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
第三帧 过渡至 第四帧 效果图如下
综上，动画从第一帧过渡至第四帧，再过渡回第一帧
span::after {
animation: loadingx 2s linear infinite alternate;
}
@keyframes loadingx {
0% {
transform: translate(0, 0) rotateX(0) rotateY(0)
}
33% {
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
}
66% {
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
}
100% {
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
}
}
将此动画定义为动画2
效果图如下
步骤7
动画1为：
动画2为：
将动画1与动画2叠加
效果图如下
步骤8
去掉span背景色
最终效果图如下
结语
文章仅作为学习笔记，记录从0到1的一个过程
希望对您有所帮助，如有错误欢迎小伙伴指正～
我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧
谢谢支持️
【动画消消乐】HTML+CSS 自定义加载动画 062的更多相关文章
- 【动画消消乐】HTML+CSS 自定义加载动画 061
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...
- 【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...
- 【动画消消乐】HTML+CSS 自定义加载动画 064（currentColor的妙用！）
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...
- 【动画消消乐】HTML+CSS 自定义加载动画 065
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- 【动画消消乐】HTML+CSS 自定义加载动画：怦然心跳 066
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- html自定义加载动画
整体代码 HTML 实现自定义加载动画,话不多说如下代码所示: <!DOCTYPE html> <html lang="en"> <head> ...
- CSS 实现加载动画之八-圆点旋转
这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...
- CSS 实现加载动画之二-圆环旋转
上次简单的介绍了下如何用代码实现菊花旋转的加载动画,动画点击,这次继续我们的动画系列,实现另外一种加载动画,圆环旋转.与上次不同的是,菊花旋转是通过改变元素透明度来实现动画,这次因为考虑到元素叠加,加 ...
- CSS 实现加载动画之七-彩环旋转
今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...
随机推荐
- 痞子衡嵌入式：嵌入式里通用微秒(microseconds)计时函数框架设计与实现
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是嵌入式里通用微秒(microseconds)计时函数框架设计与实现. 在嵌入式软件开发里,计时可以说是非常基础的功能模块了,其应用也非常 ...
- .NET平台系列21：云原生时代 .NET5 雄霸天下
系列目录 [已更新最新开发文章,点击查看详细] 随着互联网持续高歌猛进,相关技术名词也是层出不穷.微服务.容器化.DevOps.ServerLess.FaaS,这两年最火的当属云原生Cloud ...
- Java IO学习笔记二：DirectByteBuffer与HeapByteBuffer
作者:Grey 原文地址:Java IO学习笔记二:DirectByteBuffer与HeapByteBuffer ByteBuffer.allocate()与ByteBuffer.allocateD ...
- java并发编程JUC第十篇：CyclicBarrier线程同步
在之前的文章中已经为大家介绍了java并发编程的工具:BlockingQueue接口.ArrayBlockingQueue.DelayQueue.LinkedBlockingQueue.Priorit ...
- Java双重循环
在实际开发中我们常常遇到这样的问题,有A.B两个集合,这两个集合的某一个字段是相同的,要把A集合和B进行匹配,然后把A的值赋值给B例如: //上传图片 List<MultipartFile> ...
- Spring Boot动态权限变更实现的整体方案
1.前言 在Web项目中,权限管理即权限访问控制为网站访问安全提供了保障,并且很多项目使用了Session作为缓存,结合AOP技术进行token认证和权限控制.权限控制流程大致如下图所示: 现 ...
- 在 NUC980 上运行 RT-Thread
NUC980 & RT-Thread (1) NUC980 nuc980 是新塘推出的基于 ARM926EJ-S,集成 64 MB 或 128 MB DDR-II 的处理器,主频可以达到300 ...
- 扩展ADO.net实现对象化CRUD(.net core/framework)
扩展ADO.net实现对象化CRUD(.net core/framework) 安装nuget包:CRL using CRL; 实现数据操作 获取数据访问连接IDbConnection dbConne ...
- Kubernetes的亲和性和反亲和性
节点亲缘性规则可以影响pod被调度到哪个节点.但是,这些规则只影响了pod和节点之间的亲缘性.然而,有些时候也希望能有能力指定pod自身之间的亲缘性. 举例来说,想象一下有一个前端pod和一个后端po ...
- Kubernetes中予许及限制(PodSecurityPolicy)使用宿主机资源
1.在pod中使用宿主机命名空间.端口等资源 pod中的容器通常在分开的Linux命名空间中运行.这些命名空间将容器中的进程与其他容器中,或者宿主机默认命名空间中的进程隔离开来. 例如,每一个pod有 ...