效果展示

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里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

随机推荐

ResNet网络的训练和预测
ResNet网络的训练和预测简介 Introduction 图像分类与CNN 图像分类是指将图像信息中所反映的不同特征,把不同类别的目标区分开来的图像处理方法,是计算机视觉中其他任务,比如目标检测 ...
ContOS8 配置MariaDB
导语: 该篇文章主要记录ContOS8安装MariaDB后的一些配置内容,若想要详细了解安装过程请移步至上一篇博文! 正文: 首先对MariaDB进行相关的简单配置使用mysql_secure_in ...
mongodb的ObjectId最后三个字节有趣的地方
ObjectId 由12个字节组成,其中组成如下: a 4-byte timestamp value, representing the ObjectId's creation, measured i ...
JUC 并发编程--03, 深刻理解锁, 8 锁现象,
如何判断锁的是谁? 永远知道是什么锁, 线程8锁:就是关于锁的8个问题问题1: public class LockDemo01 { public static void main(String[] ...
重新整理 mysql 基础篇————— mysql 事务[三]
前言简单整理一下事务. 正文事务有四大特性: 1.原子性(atomicity) 一个事务必须被视为一个不可分割的最小单元. 2.一致性(consistency) 数据库总是从一个一致性的状态转换到 ...
五、部署LNMP环境（linux + nginx + mysql + php）
装包(nginx.数据库.php.php调用)---------起服务-----权限装包: yum -y install gcc openssl-devel pcre-devel zlib-de ...
CMD批处理（4）——批处理循环语句结构
FOR函数,对一组文件批量执行命令,基本模式如下 1.文件搜索 for [/D] [/R [路径]] %%变量 in (集合) do (命令) 2.等差数列 for /L %%变量 in (开始,间隔 ...
Kafka 总结学习
Kafka Need No Keeper 最近在鹅厂工作中不断接触到Kafka,虽然以前也使用过,但是对其架构和发展过程总是模模糊糊,所以在回学校准备末考的时候找些资料总结一下. Kafka Need ...
3-Partition 问题
这是算法考试的最后一题,当时匆匆写了个基于 Subset Sum 的解法,也没有考虑是否可行. 问题描述如下: 给定 \(n\) 个正整数 \(a_1 \dots a_n\) ,设下标的整数集合 \( ...
Processing中PImage类和loadImage()、createImage()函数的相关解析
聊一聊Processing中PImage类和loadImage().createImage()函数.因为要借P5做多媒体创意展示,图片是一个很重要的媒体.有必要就图片的获取和展放作总结. 首先有一点 ...

【动画消消乐】HTML+CSS 自定义加载动画 062

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

步骤6

步骤7

步骤8

结语

【动画消消乐】HTML+CSS 自定义加载动画 062的更多相关文章

随机推荐

热门专题