【动画消消乐】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里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...
随机推荐
- GPU特征处理技术
GPU特征处理技术 GPU和CPU有何不同? 现代片上系统(SoC)通常集成中央处理器(CPU)和图形处理器(GPU).设计不同,这可能更取决于处理的数据集的类型. CPU经过优化,可以一次对几块数据 ...
- CUDA C++程序设计模型
CUDA C++程序设计模型 本章介绍了CUDA编程模型背后的主要概念,概述了它们在C++中的暴露方式.在编程接口中给出了CUDA C++的广泛描述. 使用的矢量加法示例的完整代码可以在矢量加法CUD ...
- 一文带你了解.Net互斥锁
本文主要讲解.Net基于Threading.Mutex实现互斥锁 基础互斥锁实现 基础概念:和自旋锁一样,操作系统提供的互斥锁内部有一个数值表示锁是否已经被获取,不同的是当获取锁失败的时候,它不会反复 ...
- C++ folly库解读（三）Synchronized —— 比std::lock_guard/std::unique_lock更易用、功能更强大的同步机制
目录 传统同步方案的缺点 folly/Synchronized.h 简单使用 Synchronized的模板参数 withLock()/withRLock()/withWLock() -- 更易用的加 ...
- 屏蔽国内app开屏广告接口的记录
脉脉: im-x.jd.com api.taou.com 虎扑: goblin.hupu.com 知乎(屏蔽此接口后,进入知乎会报一次错误,不影响正常使用) api.zhihu.com 豆瓣: api ...
- 第三节：Redis缓存雪崩、击穿、穿透、双写一致性、并发竞争、热点key重建优化、BigKey的优化 等解决方案
一. 缓存雪崩 1. 含义 同一时刻,大量的缓存同时过期失效. 2. 产生原因和后果 (1). 原因:由于开发人员经验不足或失误,大量热点缓存设置了统一的过期时间. (2). 产生后果:恰逢秒杀高峰, ...
- 在线博客转PDF电子书 | JS爬虫初探
最近在看一位大佬写的源码解析博客,平时上下班用手机看不太得劲,但是平板又没有网卡,所以就想搞个离线pdf版,方便通勤时间学习阅读. 所以,问题来了: 怎么把在线网页内容转成pdf? 这位大佬的博客是用 ...
- CSS 奇思妙想 | 全兼容的毛玻璃效果
通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...
- Maven项目无法下载JAR包，输入mvn help:system出现No plugin found for prefix 'help' in the current project and in the plugin groups的解决方案
这个问题困扰了我很久,一直无法解决:我在虚拟机里面按照同样的步骤配置了三次maven项目,每次都能成功:可一旦到外面maven项目总是创建失败,输入mvn help:system总是出现No plug ...
- 聊一聊我在 B 站自学 Java 的经历吧
Hey guys ,这里是 cxuan,欢迎你收看我最新一期的文章. 这是一篇鸽了很久的文章...... 事情还要从上回说起...... 我爱 B 站! 这篇文章我汇总了 B 站上计算机基础(操作系统 ...