前言

Hello！小伙伴！

非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～

自我介绍ଘ(੭ˊᵕˋ)੭

昵称：海轰

标签：程序猿｜C++选手｜学生

简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）

学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！

【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！

效果展示

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;

  /* background-color: #82466e; */

  animation: backColor 4s infinite;

}

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;

  background-color: goldenrod;

  display: inline-block;

  position: relative;

  transform: rotate(45deg);

}

span::before {

  content: '';

  width: 24px;

  height: 24px;

  position: absolute;

  left: 0;

  top: -24px;

  animation: loading_1 4s ease infinite;

}

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(0, 0, 0, 0.15);

  animation: loading_2 2s ease infinite;

}

@keyframes loading_1 {

  0% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0)

  }

  12% {

    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)

  }

  25% {

    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)

  }

  37% {

    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)

  }

  50% {

    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)

  }

  62% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1)

  }

  75% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1)

  }

  87% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 1)

  }

  100% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0)

  }

}

@keyframes loading_2 {

  0% {

    transform: translate(0, 0) rotateX(0) rotateY(0)

  }

  25% {

    transform: translate(100%, 0) rotateX(0) rotateY(180deg)

  }

  50% {

    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)

  }

  75% {

    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)

  }

  100% {

    transform: translate(0, 0) rotateX(0) rotateY(360deg)

  }

}

原理详解

步骤1

使用span标签，设置为

宽度、高度均为48px
背景色：棕色
相对定位

span {

  width: 48px;

  height: 48px;

  background-color: goldenrod;

  position: relative;

}

效果图如下：

步骤2

使用span::before伪元素，设置为

绝对定位（ left: 0 top: -24px）
宽度、高度均为24px
背景色：白色

span::before {

  content: '';

  width: 24px;

  height: 24px;

  position: absolute;

  background-color: #fff;

  left: 0;

  top: -24px;

}

效果图如下：

步骤3

使用box-shadow为span::before设置四个阴影

span::before {

  box-shadow: 	0 24px red, 		/* 阴影1 */

  				24px 24px orange, 	/* 阴影2 */

  				24px 48px yellow,	/* 阴影3 */

  				0px 48px green;		/* 阴影4 */

}

四个阴影位置关系如下：

注：这里为了视觉显示区分四个阴影，每个阴影采用了不同的颜色，在实际中其实每个阴影都设置为白色。

步骤4

为span::before的四个阴影添加动画loading_1

每个阴影只有两种状态：显示与 不显示

显示与否则是通过设置颜色的透明级别为0或1

比如

阴影显示：0 24px rgba(255, 255, 255, 1)
阴影不显示：0 24px rgba(255, 255, 255, 0)

关键有九帧

第一帧

阴影1、2、3、4均不显示

box-shadow: 0 24px rgba(255, 255, 255, 0),

			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, 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);

效果图如下：

第六帧

阴影2、3、4显示
阴影1不显示

 box-shadow: 0 24px rgba(255, 255, 255, 0),

 			24px 24px rgba(255, 255, 255, 1),

 			24px 48px rgba(255, 255, 255, 1),

 			0px 48px rgba(255, 255, 255, 1);

效果图如下：

第七帧

阴影3、4显示
阴影1、2不显示

 box-shadow: 0 24px rgba(255, 255, 255, 0),

 			24px 24px rgba(255, 255, 255, 0),

 			24px 48px rgba(255, 255, 255, 1),

 			0px 48px rgba(255, 255, 255, 1);

效果图如下：

第八帧

阴影4显示
阴影1、2、3不显示

box-shadow: 0 24px rgba(255, 255, 255, 0),

			24px 24px rgba(255, 255, 255, 0),

			24px 48px rgba(255, 255, 255, 0),

			0px 48px rgba(255, 255, 255, 1);

效果图如下：

第九帧

阴影1、2、3、4均不显示

box-shadow: 0 24px rgba(255, 255, 255, 0),

			24px 24px rgba(255, 255, 255, 0),

			24px 48px rgba(255, 255, 255, 0),

			0px 48px rgba(255, 255, 255, 0);

效果图如下：

设置动画animation使得从第一帧平稳过渡至第九帧

animation: loading_1 4s ease infinite;



@keyframes loading_1 {

  0% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0)

  }

  12% {

    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)

  }

  25% {

    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)

  }

  37% {

    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)

  }

  50% {

    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)

  }

  62% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1)

  }

  75% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1)

  }

  87% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 1)

  }

  100% {

    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0)

  }

}

效果图如下：

步骤5

取消span::before的背景色

将此时形成的动画定义为动画1

步骤6

先忽略span::before形成的动画，暂时注释掉

使用span::after伪元素，设置为

绝对定位（top：0 left：0）
宽带、高度均为24px
背景色：白色，透明级别：0.85
阴影：0 0 10px rgba(0, 0, 0, 0.15);

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(0, 0, 0, 0.15);

}

效果图如下：

步骤7

为span::after添加动画

有5个关键帧

第一帧（初始状态）

二维空间：右移：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)

第三帧过渡至第四帧效果图如下

第五帧（相对于初始状态）

二维空间：右移：0 下移：0
三维空间：绕x轴旋转0度绕y轴旋转360度

transform: translate(0, 0) rotateX(0) rotateY(360deg)；

第四帧过渡至第五帧效果图如下

设置动画从第一帧过渡至第五帧

 animation: loading_2 2s ease infinite;

@keyframes loading_2 {

  0% {

    transform: translate(0, 0) rotateX(0) rotateY(0)

  }

  25% {

    transform: translate(100%, 0) rotateX(0) rotateY(180deg)

  }

  50% {

    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)

  }

  75% {

    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)

  }

  100% {

    transform: translate(0, 0) rotateX(0) rotateY(360deg)

  }

}

将此动画定义为动画2

效果图如下

步骤8

动画1为：

动画2为：

将动画1与动画2叠加

效果图如下

步骤9

将span旋转45度

span {

  transform: rotate(45deg);

}

效果图如下：

步骤10

取消span背景色

得到最终效果

结语

文章仅作为学习笔记，记录从0到1的一个过程

希望对您有所帮助，如有错误欢迎小伙伴指正～

我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧

谢谢支持️

【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）的更多相关文章

【动画消消乐】HTML+CSS 自定义加载动画 061
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专 ...
【动画消消乐】HTML+CSS 自定义加载动画 064（currentColor的妙用！）
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专 ...
【动画消消乐】HTML+CSS 自定义加载动画 065
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计 ...
【动画消消乐】HTML+CSS 自定义加载动画：怦然心跳 066
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计 ...
【动画消消乐】HTML+CSS 自定义加载动画 062
效果展示 Demo代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
高性能页面加载技术（流水线加载）BigPipe的C#简单实现(附源码）
一,BigPipe简介 BigPipe是一个重新设计的基础动态网页服务体系.大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行.这是类似于 ...
html自定义加载动画
整体代码 HTML 实现自定义加载动画,话不多说如下代码所示: <!DOCTYPE html> <html lang="en"> <head> ...
CSS 实现加载动画之八-圆点旋转
这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...

随机推荐

ISP算法高水平分析（上）
ISP算法高水平分析(上) 一．ISP基本框架及算法介绍 ISP是Image Signal Processor的缩写,全称是影像处理器.在相机成像的整个环节中,它负责接收感光元件(Sensor)的原始 ...
SystemML大规模机器学习，优化算子融合方案的研究
SystemML大规模机器学习,优化算子融合方案的研究摘要许多大规模机器学习(ML)系统允许通过线性代数程序指定定制的ML算法,然后自动生成有效的执行计划.在这种情况下,优化的机会融合基本算子的熔 ...
从PyTorch到ONNX的端到端AlexNet
从PyTorch到ONNX的端到端AlexNet 这是一个简单的脚本,可将Torchvision中定义的经过预训练的AlexNet导出到ONNX中.运行一轮推理Inference,然后将生成的跟踪模型 ...
TcaplusDB祝大家端午安康！
"五月五,端午到,赛龙舟,真热闹.吃粽子,带香包,蚊虫不来身边闹."这首脍炙人口.描绘着端午节风俗的儿歌,想必大家都听过. 每年的农历五月初五,是我国四大传统节日(春节.清明节.端 ...
UF_CSYS 坐标系操作
Open C UF_CSYS_ask_csys_info 获取WCS坐标系的原点坐标和矩阵标识UF_CSYS_ask_matrix_of_object 获得对象 ...
vue keep-alive从列表页进入详情页，再返回列表页时，还是之前滚动的位置
//router.js { path: '/oppo-music', component: () => import('@/views/OppoMusic.vue'), meta: { titl ...
不下软件，照样可以完美正确格式化树莓派SD卡！（恢复U盘/SD卡到满容量）
树莓派作用千千万,系统崩溃的理由也数不胜数(不要问我为啥知道),所以系统的重装和sd卡的格式化也在所难免.顺便给大家看一下我今天的成果,我不就是不小心摔了一下我的树莓派...我和sd卡一定是冤家! 捡 ...
【题解】Luogu P2875 [USACO07FEB]牛的词汇The Cow Lexicon
题目描述 Few know that the cows have their own dictionary with W (1 ≤ W ≤ 600) words, each containing no ...
OpenResty高并发
在电商项目中所有的访问都是通过首页访问进去的,那么首页门户的访问频率会是非常高的,用我们专业术语来说就是并发量高,这时问题就来了,并发量高我们在做程序时就要保证首页的抗压能力强,而且还要保证抗压的同时 ...
.NET解密得到UnionID
由于微信没有提供.NET的解码示例代码,自己搜索写了一个,下面的代码是可用的 var decryptBytes = Convert.FromBase64String(encrypdata); var ...

【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

步骤6

步骤7

步骤8

步骤9

步骤10

结语

【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）的更多相关文章

随机推荐

热门专题