【动画消消乐｜CSS 】仿ios、android中常见的一个loading动画
海轰Pro
共 10321字，需浏览 21分钟
· 2021-07-12
效果展示
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>
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
</body>
</html>
CSS
html,body{
margin: 0;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: #263238;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* 红色边框仅作提示 */
border: 2px solid red;
}
.loading{
position: relative;
}
.loading>div{
position: absolute;
width: 4px;
height: 20px;
border-radius: 10px;
background-color: white;
}
.loading>div:nth-child(1){
top: 20px;
left: 0px;
background-color: white;
animation: loading infinite 1s;
}
.loading>div:nth-child(2){
top: 14.1442px;
left: 14.1442px;
transform: rotate(-45deg);
background-color: white;
animation: loading infinite 1s 0.125s;
}
.loading>div:nth-child(3){
top: 0px;
left: 20px;
transform: rotate(90deg);
background-color: white;
animation: loading infinite 1s 0.25s;
}
.loading>div:nth-child(4){
top: -14.1442px;
left: 14.1442px;
transform: rotate(45deg);
background-color: white;
animation: loading infinite 1s 0.375s;
}
.loading>div:nth-child(5){
top: -20px;
left: 0px;
transform: rotate(0deg);
background-color: white;
animation: loading infinite 1s 0.5s;
}
.loading>div:nth-child(6){
top: -14.1442px;
left: -14.1442px;
transform: rotate(-45deg);
background-color: white;
animation: loading infinite 1s 0.625s;
}
.loading>div:nth-child(7){
top: 0px;
left: -20px;
transform: rotate(90deg);
background-color: white;
animation: loading infinite 1s 0.75s;
}
.loading>div:nth-child(8){
top: 14.1442px;
left: -14.1442px;
transform: rotate(45deg);
background-color: white;
animation: loading infinite 1s 0.875s;
}
@keyframes loading {
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
原理详解
步骤1
使用一个div盒子，用于放置整个loading动画，只需要设置为相对定位
<div class="loading"></div>
.loading{
position: relative;
}
步骤2
分别使用8个div充当8个条状物
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
每个div 样式设置为
绝对定位 宽度：4px 高度：20px border-radius: 10px 背景色：白色
.loading>div{
position: absolute;
width: 4px;
height: 20px;
border-radius: 10px;
background-color: white;
}
效果如下图
如果没有设置为绝对定位
效果如下
说明：
当没有设置为绝对定位的时候，因为每个div都是宽4px 高20px的小长条，所以会从上到下依次展示； 当设置为绝对定位后，只看到一个白色长条，其实这是8个长条的叠加态（每个长条div的位置重合了）
步骤3
使用 :nth-child() 操作其中的每一个div
先看最后的效果图
我们对每一个小白条标号1、2、3...8
从小白条1开始设置
top: 20px left: 0px（下移20px 水平方向不动） 背景色：红色
.loading>div:nth-child(1){
top: 20px;
left: 0px;
background-color: red;
}
效果如下图
注：
因为在开始的时候，每个div已经设置了为绝对定位，再:nth-child()单独对每个div设置的时候，只需要设置具体的所在位置，比如top、left、bottom等即可 这里设置红色 是为了区分 便于观察 此时白色条状是7个div的重叠态 红色条状是第一个div的最终位置
再设置小白条3
top: 0px left: 20px;（竖直方向不动 右移20px） 背景色：橙色
.loading>div:nth-child(3){
top: 0px;
left: 20px;
background-color: orange;
}
效果如下图
再旋转90度
.loading>div:nth-child(3){
transform: rotate(90deg);
}
效果如下图
较难的是小白条2位置关系的确定
设置为
top: 14.1442px left: 14.1442px（下移：14.1442px 右移：14.1442px） 背景色：为淡黄色
.loading>div:nth-child(2){
top: 14.1442px;
left: 14.1442px;
background-color: yellow;
}
效果如下图
再旋转 -45度
难点：为什么下移、右移距离是14.1442px呢？
海轰的理解：
以最开始的div的重心建立坐标轴（图中蓝色部分表示初始位置）
红色圆圈表示重心
小白条1、3可以很简单的表示出来（图中水平、竖直方向的浅橙色部分）
其中红色圆圈的距离是20px（因为移动的就是20px）
为了使得每个条状形成一个圆圈
我们规定每个圆圈的重心在同一个圆上
那么小白条2的位置关系如下（右下角的那个浅橙色部分）
再旋转-45度
仔细观赏 是不是三个条状围成了一个圆 哈哈
那么距离如何计算呢？
可以很清楚的观察出一个等腰直角三角形
圆半径是20px
那么x=20/根号2=20/1.414=14.1442 px
右上角、左上角、左下角的规律也是一样的，这里就不多阐述了
设置小白条4为
top: -14.1442px left: 14.1442px; 背景色：绿色 旋转45度
top: -14.1442px;
left: 14.1442px;
transform: rotate(45deg);
background-color: green;
}
效果如下图
按照相同的规律设置小白条5、6、7、8（理清楚方向就可以了 数据都差不多）
.loading>div:nth-child(5){
top: -20px;
left: 0px;
transform: rotate(0deg);
background-color: cyan;
}
.loading>div:nth-child(6){
top: -14.1442px;
left: -14.1442px;
transform: rotate(-45deg);
background-color: blue;
}
.loading>div:nth-child(7){
top: 0px;
left: -20px;
transform: rotate(90deg);
background-color: purple;
}
.loading>div:nth-child(8){
top: 14.1442px;
left: -14.1442px;
transform: rotate(45deg);
background-color: white;
}
效果如下图
步骤4
设置动画
每一个白条的动画都一样 只是错序进行即可
动画效果描述为：
50%时，透明级别为0.3 100%，透明级别为1
@keyframes loading {
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
以小白条1运行此动画为例
设置为
无限循环 动画持续时间：1s
.loading>div:nth-child(1){
animation: loading infinite 2s;
}
效果如下图
类似流水灯的原理
8个白色条状
每次只亮1个 其余7个都不亮
以1、0代表亮与不亮
则有8种状态
1000 0000（小白条1亮） 0100 0000（小白条2亮） 0010 0000（小白条3亮） 0001 0000（小白条4亮） 0000 1000（小白条5亮） 0000 0100（小白条6亮） 0000 0010（小白条7亮） 0000 0001（小白条8亮）
动画持续时间为1s
有8个小白条
为了使得当8个白条亮完后 第一个白条又开始新一轮循环
设置每个相邻条状动画间隔时间为1/8=0.125s
所以设置动画为：
.loading>div:nth-child(1){
animation: loading infinite 1s;
}
.loading>div:nth-child(2){
animation: loading infinite 1s 0.125s;
}
.loading>div:nth-child(3){
animation: loading infinite 1s 0.25s;
}
.loading>div:nth-child(4){
animation: loading infinite 1s 0.375s;
}
.loading>div:nth-child(5){
animation: loading infinite 1s 0.5s;
}
.loading>div:nth-child(6){
animation: loading infinite 1s 0.625s;
}
.loading>div:nth-child(7){
animation: loading infinite 1s 0.75s;
}
.loading>div:nth-child(8){
animation: loading infinite 1s 0.875s;
}
效果如下图
步骤5
最后将所有div的颜色修改为白色
得到最终效果
结语
希望对您有所帮助
如有错误欢迎小伙伴指正～
我是 海轰ଘ(੭ˊᵕˋ)੭
如果您觉得写得可以的话
请点个赞吧
谢谢支持❤️
评论
多人同时导出 Excel 干崩服务器！新来的阿里大佬给出的解决方案太优雅了！
点击关注公众号，Java 干货及时推送↓推荐阅读：面试辅导，我们出大成果了！来源：juejin.cn/post/7259249904777838629前言 业务诉求：考虑到数据库数据日渐增多，导出会有全量数据的导出，多人同时导出可以会对服务性能造成影响，导出涉及到mysql查询的io操作，
Java技术栈
1
Go 1.22 的新增功能系列之二：reflect.TypeFor
Go 1.22 的第一个候选版本已经发布，这意味着最终版本即将发布，现在是我在博客中介绍我在这个周期中所做工作的时候了。像往常一样，我的贡献很小，但它们是我的，所以我将从幕后的角度来谈谈它们。首先是reflect.TypeFor。这是整个函数：// TypeFor returns the [Type
GoCN
0
有意思！一个关于 Spring 历史的在线小游戏
发现 Spring One 的官网上有个好玩的彩蛋，分享给大家！进到Spring One的官网，可以看到右下角有个类似马里奥游戏中的金币图标。点击该金币之后，会打开一个新的页面，进入下面这样一个名为：The History Of Spring 的在线小游戏你可以使用上下左右的方向键来控制Spring
公众号程序猿DD
1
了解加密货币到加密货币的互换
1、什么是加密货币互换？加密货币到加密货币的互换是指以现行市场汇率将一种加密货币直接兑换为另一种加密货币。与需要法定货币存款和较长流程的传统交易所不同，加密货币到加密货币的互换可以无缝地促进交换。掉期在提高加密货币的流动性和效率方面发挥着重要作用。该功能使用户能够将他们的加密货币与钱包中的其他代币进
区块链头条
0
李彦宏：开源大模型不如闭源，后者会持续领先；周鸿祎：“开源不如闭源” 的言论是胡说八道
架构师大咖
架构师大咖，打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖，每日推送。
公众号该公众号已被封禁0、李彦宏：开源大模型不如闭源，后者会持续领先当今
源码共读
0
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说，如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列，想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口，带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2
Go早期是如何在Google内部发展起来的
2007年Go诞生于Google，2009年Google正式对外宣布了Go语言的开源！时至今日，距离Go开源已经过去了近15个年头了[1]！Go在Google公司内部究竟是怎样的一个状态呢？前Google员工Yves Junqueira近期撰文从其个人所见所闻谈了Go在Google的历程[2]！这里
GoCN
0
【第129期】程序员的新宠：三款终端工具，让你告别Xshell！
概述 WindTerm：跨平台的SSH利器 首先介绍的是WindTerm，这是一款使用C语言开发的跨平台SSH客户端。它不仅完全免费，而且没有商业使用的限制。WindTerm支持SSH v2、Telnet、Raw Tcp等协议，而且性能出色，甚至超过了FinalShell和Electerm。功能
前端微服务
0