【动画消消乐】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里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...
随机推荐
- MindSpore API编程概述
MindSpore API编程概述 总体架构 MindSpore是一个全场景深度学习框架,旨在实现易开发.高效执行.全场景覆盖三大目标,其中易开发表现为API友好.调试难度低,高效执行包括计算效率.数 ...
- python+selenium基础篇，切入切出frame
1.首先制作一个html的文件,代码如下 <!DOCTYPE html> <html> <head> <title>Frame_test</tit ...
- 4，java数据结构和算法：双向链表 ，有序添加，正向遍历，反向遍历， 增删改查
直接上代码 //节点 class HeroNodeD{ int no; String name; String nickName; HeroNodeD pre;//前一节点 HeroNodeD nex ...
- Redis系列（一）：安装
本系列介绍Redis,从安装到使用,太简单的使用不介绍了,介绍一些比较有意思的功能,也会介绍一些原理性的东西.本篇先介绍Redis的单实例安装.Redis还可以做到高可用,通过哨兵和集群可以做到高可用 ...
- 如何避免Nginx将url decode
灵感来自:https://my.oschina.net/jastme/blog/528541 这是最近玩微服务架构遇到的一个情况,因为Spring Boot 1.5的网关不支持websocket的转发 ...
- Integer 如何实现节约内存和提升性能的？
在Java5中,为Integer的操作引入了一个新的特性,用来节省内存和提高性能.整型对象在内部实现中通过使用相同的对象引用实现了缓存和重用. 上面的规则默认适用于整数区间 -128 到 +127(这 ...
- ffmpeg-入门介绍（笔记）
一.FFmpeg的基本组成 目前,ffmpeg有7大库,分别为AVFormat, AVCodec, AVFilteer, AVDecoder, AVUtil,Swresample, Swscale,A ...
- canvas绘制动画的技巧
我们拿下图中的沿着线段轨迹移动的原点来举例,怎么来实现这个动画! 1)定义路径集合Path,里面规定关键坐标点如startPoint和endPoint,设置从startPoint移动到endPoint ...
- excel判断数据是否存在另一列中
1.if(EXACT(A2,B2)=TRUE,"相同","不同"),A2,B2相同(字母区分大小写)则函数值true正确,反馈相同,反之返回不同.注:单元格值受 ...
- hive学习笔记之六：HiveQL基础
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...