前言

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. 源代码 ...

随机推荐

3层-CNN卷积神经网络预测MNIST数字
3层-CNN卷积神经网络预测MNIST数字本文创建一个简单的三层卷积网络来预测 MNIST 数字.这个深层网络由两个带有 ReLU 和 maxpool 的卷积层以及两个全连接层组成. MNIST 由 ...
使用Runtime执行推理（C++）
使用Runtime执行推理(C++) 概述通过MindSpore Lite模型转换后,需在Runtime中完成模型的推理执行流程.本教程介绍如何使用C++接口编写推理代码. Runtime总体使用流 ...
IOS小组件（8）：App与Widget数据共享
引言 Widget是一个迷你版的App,IOS有沙盒机制,不同App之间无法直接共享数据.组件和主App之间其实就是不同App的关系,所以也无法通过userdefaults.standard来传数 ...
CentOS：操作系统级监控及常用计数器解析---除CPU以外
I/O I/O 其实是挺复杂的一个逻辑,但我们今天只说在做性能分析的时候,应该如何定位问题. 对性能优化比较有经验的人(或者说见过世面比较多的人)都会知道,当一个系统调到非常精致的程度时,基本上会卡在 ...
Java8的Stream API确实很牛，但性能究竟如何？
Stream Performance 已经对 Stream API 的用法鼓吹够多了,用起简洁直观,但性能到底怎么样呢?会不会有很高的性能损失?本节我们对 Stream API 的性能一探究竟. 为保 ...
Redisson 分布式锁源码 02：看门狗
前言说起 Redisson,比较耳熟能详的就是这个看门狗(Watchdog)机制. 本文就一起看看加锁成功之后的看门狗(Watchdog)是如何实现的? 加锁成功在前一篇文章中介绍了可重入锁加锁的 ...
Local dimming algorithm in matlab
LED局部背光算法的matlab仿真最近公司接了华星光电(TCL)的一个项目LCD-BackLight-Local-Diming-Algorithm-IP ,由于没有实际的硬件,只能根据客户给的论文 ...
Unity StateMachineBehaviour
在unity animator中单个Animator Clip中点击Add Behaviour增加当执行该动画时的一些状态代码,请看如下创建完之后基本代码结构如下:(如果想修改默认代码结构,请看示例 ...
hive学习笔记之十：用户自定义聚合函数(UDAF)
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览本文是<hive学习笔记>的第十 ...
配置tomcat虚拟主机
实例说明本实例介绍如何配置tomcat的虚拟主机. 关键技术关于server.xml中host这个元素,只有在设置虚拟主机是才会修改.虚拟主机是一种在一个Web服务器上服务多个域名的机制,对这个域 ...

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

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

步骤6

步骤7

步骤8

步骤9

步骤10

结语

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

随机推荐

热门专题