学习CSS3，实现红色心形loading特效
试想一下，如果你的网站在加载过程中，loading图由一个老旧的菊花转动图片，变为一个红色的心形loading特效，那该有多炫酷啊。
目录
实现思路
初始化HTML部分
延迟动画是重点
设定动画效果
完整源代码
最后
实现思路
- 每个竖线由一个li标签来实现，当然，我们需要设定他的起始高度，并且设定色值，设定圆角；
- 由于是loading图，需要在整体页面的垂直和水平居中，这涉及到CSS3的flex布局学习；
- 动画特效，就需要使用到animation动画了，需要与@keyframes配合使用；
- 最重要的是这个loading过程，需要设置一定的动画延迟，而不是使用javascript的setTimeout来实现。
可以说，CSS3的成熟，在很多程度上节约了JS的使用，节省了图片的网络请求与加载，这也是网站性能优化的很大体现。
初始化HTML部分
loading图的初始化，需要准备9个 li 标签，而 li 标签的父元素需要相对于整个页面垂直水平居中，而几乎所有的loading图也都是相对于整体网站居中对齐的，这里需要保持一致。
这一小部分，需要学习到的CSS3知识点有，flex布局、justify-content水平居中、align-items垂直居中、border-radius圆角设置等。代码如下：
<!-- HTML5部分 -->
<div id="he"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>// CSS3部分
*{padding: 0;margin: 0;list-style: none;
}
#he{display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #232e6d;
}
ul{height: 200px;
}
li{float: left;width: 20px;height: 20px;border-radius: 20px;margin-right: 10px;background-color: red;
}初始化代码后，你可以看到的效果是这样子的，效果如图：
延迟动画是重点
由于要做的是一个CSS3的loading图，所以就需要从左到右的依次动效，而不是突然就变成一个心形了，这样起不到用户等待的效果。
而依次动效，平时一般使用setTimeout，然后获取每个DOM元素，再依次改变起CSS样式，或者直接修改style行内样式，但CSS3的成熟，大大减小了这方面的性能支出。CSS3设定代码如下：
li:nth-child(1){animation: love1 4s infinite;
}
li:nth-child(2){animation: love2 4s infinite;animation-delay: 0.15s;
}
li:nth-child(3){animation: love3 4s infinite;animation-delay: 0.3s;
}
li:nth-child(4){animation: love4 4s infinite;animation-delay: 0.45s;
}
li:nth-child(5){animation: love5 4s infinite;animation-delay: 0.6s;
}
li:nth-child(6){animation: love4 4s infinite;animation-delay: 0.75s;
}
li:nth-child(7){animation: love3 4s infinite;animation-delay: 0.9s;
}
li:nth-child(8){animation: love2 4s infinite;animation-delay: 1.05s;
}
li:nth-child(9){animation: love1 4s infinite;animation-delay: 1.2s;
}设定动画效果
然后就可以设定动画效果了，虽然看上去是9个 li 元素，但仔细观察，其实左右对称，也就是写5份动画@keyframes就可以了，因为第一个和最后一个的动效过程是一样的，依次往下看，只有中间部分，心形的尖头部分特立独行，单独为他准备一份CSS设定即可。
但需要注意的是：这个依次的动效过程，就需要设定好每份样式的起始高度和结束高度，再然后这里面有一个translateY的高度延伸
CSS3代码设定如下：
@keyframes love1{30%,50%{height: 60px; transform: translateY(-30px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love2{30%,50%{height: 125px; transform: translateY(-62.5px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love3{30%,50%{height: 160px; transform: translateY(-75px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love4{30%,50%{height: 180px; transform: translateY(-60px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love5{30%,50%{height: 190px; transform: translateY(-45px);}75%,100%{height: 20px; transform: translateY(0);}
}完整源代码
前面说了这么多，怕你看的不够仔细，所以我这里放一下完整的源代码，你可以通过以下步骤自己拿到源代码
- 新建一个txt文档，如 CSS动效.txt 这样的文档
- 将 txt 文本后缀改为 html
- 使用一个开发工具，例如VSCode，sublime，或者直接txt文本工具打开都行（前端开发最初吸引我的地方就是，无需任何特殊环境，只要在一个文本里就可以书写代码，而且可以直接利用浏览器查看效果，这简直太酷了，其他语言可以吗？当然，汉语也不错，你直接张嘴就说，更不需要环境，哈哈，开个玩笑啦）
- 再然后，拿到源代码，复制到你的 html 文本里，保存，再用浏览器打开就可以啦，就是如此简单，那句名人名言是啥来着？对了So easy!
完整源代码如下：
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3爱心形状加载动画特效</title><style>
*{padding: 0;margin: 0;list-style: none;
}
#he{display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #232e6d;
}
ul{height: 200px;
}
li{float: left;width: 20px;height: 20px;border-radius: 20px;margin-right: 10px;background-color: red;
}
li:nth-child(1){animation: love1 4s infinite;
}
li:nth-child(2){animation: love2 4s infinite;animation-delay: 0.15s;
}
li:nth-child(3){animation: love3 4s infinite;animation-delay: 0.3s;
}
li:nth-child(4){animation: love4 4s infinite;animation-delay: 0.45s;
}
li:nth-child(5){animation: love5 4s infinite;animation-delay: 0.6s;
}
li:nth-child(6){animation: love4 4s infinite;animation-delay: 0.75s;
}
li:nth-child(7){animation: love3 4s infinite;animation-delay: 0.9s;
}
li:nth-child(8){animation: love2 4s infinite;animation-delay: 1.05s;
}
li:nth-child(9){animation: love1 4s infinite;animation-delay: 1.2s;
}
@keyframes love1{30%,50%{height: 60px; transform: translateY(-30px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love2{30%,50%{height: 125px; transform: translateY(-62.5px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love3{30%,50%{height: 160px; transform: translateY(-75px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love4{30%,50%{height: 180px; transform: translateY(-60px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love5{30%,50%{height: 190px; transform: translateY(-45px);}75%,100%{height: 20px; transform: translateY(0);}
}
</style></head>
<body><div id="he"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div></body>
</html>最后
好啦，代码学习完了，也快要五一节假日啦，给大家提个醒，去哪个景点都注定是东西又贵，又人山人海，所以我一般的选择是周末加请假，这样避开高峰，好出行，能省钱。而五一这样的节假日，当然是应该回家看看许久不见的亲人们啦。
千言万语一句话，工作的时候好好工作，放假了就好好玩好好休息，劳逸结合嘛。
相关文章：
学习CSS3，实现红色心形loading特效
试想一下，如果你的网站在加载过程中，loading图由一个老旧的菊花转动图片，变为一个红色的心形loading特效，那该有多炫酷啊。 目录 实现思路 初始化HTML部分 延迟动画是重点 设定动画效果 完整源代码 最后 实现思路 每个…...
深度学习之基于Matlab神经网络的活体人脸和视频人脸识别系统
欢迎大家点赞、收藏、关注、评论啦 ，由于篇幅有限，只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 人脸识别技术作为生物识别技术的一种，近年来得到了广泛的关注和应用。与传统的身份认证方…...
充电桩测试：负载箱的重要性
随着电动汽车的普及，充电桩的需求也在不断增加。为了保证充电桩的安全、稳定和高效运行，对其进行严格的测试是必不可少的。在充电桩测试过程中，负载箱作为一种重要的测试设备，对于评估充电桩的性能和可靠性具有重要意义。 负载箱可…...
贪心算法、Dijkstra和A*类路径搜索算法
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言系列文章目录前言1.贪心算法、Dijkstra和A*类路径搜索算法（1）greedy best frist search贪心算法（仅仅考虑启发式代价）1.核心思想2.构造启发式猜…...
Debian是什么？有哪些常用命令
目录 一、Debian是什么？ 二、Debian常用命令 三、Debian和CentOS的区别 四、Debian和CentOS的优缺点 五、Debian和CentOS的运用场景 一、Debian是什么？ Debian是一种流行的开源Linux操作系统。 Debian是一个以Linux内核为基础的操…...
万兴PDF专家 PDFelement Pro v10.3.8 破姐版！
🧑💻万兴PDF专家 PDFelement Pro v10.3.8 破姐版 (https://docs.qq.com/sheet/DRVVxTHJ3RXJFVHVr)...
Ubuntu22.04 私钥登录
1. 背景 以前一直使用秘钥登录Linux，最近新装了一台Ubuntu 22.04，照旧部署公钥，使用私钥登录，结果SecureCRT 登录没有问题，使用Xshell登录一直报“所选的用户密钥未在远程主机上注册,请再试一次”。然后各种试&#x…...
Java_JVM_JVMs
JVM 官方文档说明文档目录 官方文档 JVM Specification 说明 以Java SE 17为标准 文档目录 2：JVM 结构 class文件数据类型 基本数据类型引用数据类型 运行时数据区 栈帧 其他内容 对象的表示浮点数运算特殊方法 初始化方法【实例、类】多态方法 3ÿ…...
Linux系统编程之基本指令
零、Linux发展史 1、诞生 1991年10月5日，赫尔辛基大学的一名研究生Linus Benedict Torvalds在一个Usenet新闻组 （comp.os.minix）中宣布他编制出了一种类似UNIX的小操作系统，叫Linux。新的操作系统是受到另一个UNIX的小操作系统—…...
[1702]java旅游资源网上填报系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
一、源码特点 java旅游资源网上填报系统是一套完善的java web信息管理系统，对理解JSP java编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发，数据库为Mysql…...
【Flask 系统教程 3】请求与响应
Flask 是一个灵活而强大的 Web 框架，而请求与响应则是构建 Web 应用的核心组成部分。在本文中，我们将探讨 Flask 中请求与响应的各种用法，包括不同的请求方法、重定向、响应对象、获取查询参数以及文件上传等。 请求 在 Flask 中࿰…...
jsp校园商城派送系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
一、源码特点 JSP 校园商城派送系统 是一套完善的web设计系统，对理解JSP java编程开发语言有帮助，系统具有完整的源代码和数据库，系统采用serlvetdaobean mvc 模式，系统主要采用B/S模式 开发。开发环境为TOMCAT7.0,Myeclipse8.…...
【Linux】System V 共享内存
文章目录 1. 共享内存示意图2. 共享内存数据结构3. 共享内存函数shmgetshmatshmdtshmctl 4. 实例代码测试共享内存5. 共享内存相关命令6. System V 消息队列（了解）7. System V 信号量（了解） 共享内存区是最快的 IPC 形式。一旦这样…...
拼多多标准推广怎么玩
拼多多标准推广的玩法主要包括以下方面： 拼多多推广可以使用3an推客。3an推客（CPS模式）给商家提供的营销工具，由商家自主设置佣金比例，激励推广者去帮助商家推广商品链接，按最终有效交易金额支付佣金&…...
HFSS学习-day2-T形波导的优化设计
入门实例–T形波导的内场分析和优化设计 HFSS--此实例优化设计 优化设计要求1. 定义输出变量Power31、Power21、和Power11，表示Port3、Port2、Port1的输出功率2.参数扫描分析添加扫描变量和输出变量进行一个小设置添加输出变量进行扫描分析 3. 优化设计，…...
贪吃蛇小游戏（c语言）
1.效果展示 屏幕录制 2024-04-28 205129 2.基本功能 • 贪吃蛇地图绘制 • 蛇吃食物的功能 （上、下、左、右方键控制蛇的动作） • 蛇撞墙死亡 • 蛇撞自身死亡 • 计算得分 • 蛇身加速、减速 • 暂停游戏 3.技术要点 C语言函数、枚举、结构…...
多商户Docker Supervisor进程管理器部署
Dockerfile 根目录下没有Dockerfile的可以复制下面的命令 # 使用基础镜像 FROM leekay0218/crmeb-mer## 复制代码 ## 在本地调试注释掉，使用映射把文件映射进去 #ADD ./ /var/www# 设置工作目录 WORKDIR /var/www# 设置时区为上海 ENV TZAsia/Shanghai RUN ln -sn…...
Vue--》从零开始打造交互体验一流的电商平台（一）
今天开始使用 vue3 ts 搭建一个电商项目平台，因为文章会将项目的每处代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的github上，大家可以自行去进行下载运行，希…...
uniapp 自定义相机插件（组件版、缩放、裁剪）组件 Ba-CameraView
自定义相机插件（组件版、缩放、裁剪） Ba-CameraView 简介（下载地址） Ba-CameraView 是一款自定义相机拍照组件，支持任意界面，支持裁剪 支持任意自定义界面支持手势缩放支持裁剪（手势拖动、比…...
如何在Python中生成随机密码？
你可以使用Python的random模块来生成随机密码。下面是一个生成随机密码的简单示例代码： import random import stringdef generate_random_password(length):characters string.ascii_letters string.digits string.punctuationpassword .join(random.choice(c…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
ESP32读取DHT11温湿度数据
芯片：ESP32 环境：Arduino 一、安装DHT11传感器库 红框的库，别安装错了 二、代码 注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项： 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库： npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...
热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露，数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据，严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能，但SEMR…...
规则与人性的天平——由高考迟到事件引发的思考
当那位身着校服的考生在考场关闭1分钟后狂奔而至，他涨红的脸上写满绝望。铁门内秒针划过的弧度，成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"，构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...
yaml读取写入常见错误 (‘cannot represent an object‘, 117)
错误一：yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因，后面把yaml.safe_dump直接替换成yaml.dump，确实能保存，但出现乱码： 放弃yaml.dump，又切…...