当前位置： 首页 > news >正文

学习CSS3，实现红色心形loading特效

news 2026/5/11 3:33:28

试想一下，如果你的网站在加载过程中，loading图由一个老旧的菊花转动图片，变为一个红色的心形loading特效，那该有多炫酷啊。

63748e72dc314943857316f3b1f6a386.gif#pic_center

 

目录

实现思路 

初始化HTML部分 

延迟动画是重点 

设定动画效果 

完整源代码

最后

 

d5d1ee7b9ef7417db4cb1c5ded675986.png

 

实现思路 

  • 每个竖线由一个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;
}

初始化代码后，你可以看到的效果是这样子的，效果如图：

2e37356925c94307b827472334fc9da9.png

延迟动画是重点 

由于要做的是一个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);}
}

完整源代码

前面说了这么多，怕你看的不够仔细，所以我这里放一下完整的源代码，你可以通过以下步骤自己拿到源代码

  1. 新建一个txt文档，如 CSS动效.txt 这样的文档
  2. 将 txt 文本后缀改为 html
  3. 使用一个开发工具，例如VSCode，sublime，或者直接txt文本工具打开都行（前端开发最初吸引我的地方就是，无需任何特殊环境，只要在一个文本里就可以书写代码，而且可以直接利用浏览器查看效果，这简直太酷了，其他语言可以吗？当然，汉语也不错，你直接张嘴就说，更不需要环境，哈哈，开个玩笑啦）
  4. 再然后，拿到源代码，复制到你的 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特效

试想一下&#xff0c;如果你的网站在加载过程中&#xff0c;loading图由一个老旧的菊花转动图片&#xff0c;变为一个红色的心形loading特效&#xff0c;那该有多炫酷啊。 目录 实现思路 初始化HTML部分 延迟动画是重点 设定动画效果 完整源代码 最后 实现思路 每个…...

编程日记 2024/5/7 12:30:27

深度学习之基于Matlab神经网络的活体人脸和视频人脸识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 人脸识别技术作为生物识别技术的一种&#xff0c;近年来得到了广泛的关注和应用。与传统的身份认证方…...

编程日记 2024/5/7 12:29:26

充电桩测试：负载箱的重要性

随着电动汽车的普及&#xff0c;充电桩的需求也在不断增加。为了保证充电桩的安全、稳定和高效运行&#xff0c;对其进行严格的测试是必不可少的。在充电桩测试过程中&#xff0c;负载箱作为一种重要的测试设备&#xff0c;对于评估充电桩的性能和可靠性具有重要意义。 负载箱可…...

编程日记 2024/5/7 12:28:25

贪心算法、Dijkstra和A*类路径搜索算法

系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言系列文章目录前言1.贪心算法、Dijkstra和A*类路径搜索算法（1）greedy best frist search贪心算法（仅仅考虑启发式代价）1.核心思想2.构造启发式猜…...

编程日记 2024/5/7 12:27:24

Debian是什么？有哪些常用命令

目录 一、Debian是什么&#xff1f; 二、Debian常用命令 三、Debian和CentOS的区别 四、Debian和CentOS的优缺点 五、Debian和CentOS的运用场景 一、Debian是什么&#xff1f; Debian是一种流行的开源Linux操作系统。 Debian是一个以Linux内核为基础的操…...

编程日记 2024/5/7 12:25:22

万兴PDF专家 PDFelement Pro v10.3.8 破姐版！

&#x1f9d1;‍&#x1f4bb;万兴PDF专家 PDFelement Pro v10.3.8 破姐版 (https://docs.qq.com/sheet/DRVVxTHJ3RXJFVHVr)...

编程日记 2024/5/7 12:24:20

Ubuntu22.04 私钥登录

1. 背景 以前一直使用秘钥登录Linux&#xff0c;最近新装了一台Ubuntu 22.04&#xff0c;照旧部署公钥&#xff0c;使用私钥登录&#xff0c;结果SecureCRT 登录没有问题&#xff0c;使用Xshell登录一直报“所选的用户密钥未在远程主机上注册,请再试一次”。然后各种试&#x…...

编程日记 2024/5/7 12:22:18

Java_JVM_JVMs

JVM 官方文档说明文档目录 官方文档 JVM Specification 说明 以Java SE 17为标准 文档目录 2&#xff1a;JVM 结构 class文件数据类型 基本数据类型引用数据类型 运行时数据区 栈帧 其他内容 对象的表示浮点数运算特殊方法 初始化方法【实例、类】多态方法 3&#xff…...

编程日记 2024/5/7 12:20:16

Linux系统编程之基本指令

零、Linux发展史 1、诞生 1991年10月5日&#xff0c;赫尔辛基大学的一名研究生Linus Benedict Torvalds在一个Usenet新闻组 &#xff08;comp.os.minix&#xff09;中宣布他编制出了一种类似UNIX的小操作系统&#xff0c;叫Linux。新的操作系统是受到另一个UNIX的小操作系统—…...

编程日记 2024/5/7 12:19:16

[1702]java旅游资源网上填报系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java旅游资源网上填报系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql…...

编程日记 2024/5/7 12:18:14

【Flask 系统教程 3】请求与响应

Flask 是一个灵活而强大的 Web 框架&#xff0c;而请求与响应则是构建 Web 应用的核心组成部分。在本文中&#xff0c;我们将探讨 Flask 中请求与响应的各种用法&#xff0c;包括不同的请求方法、重定向、响应对象、获取查询参数以及文件上传等。 请求 在 Flask 中&#xff0…...

编程日记 2024/5/7 12:17:13

jsp校园商城派送系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 校园商城派送系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统采用serlvetdaobean mvc 模式&#xff0c;系统主要采用B/S模式 开发。开发环境为TOMCAT7.0,Myeclipse8.…...

编程日记 2024/5/7 12:16:12

【Linux】System V 共享内存

文章目录 1. 共享内存示意图2. 共享内存数据结构3. 共享内存函数shmgetshmatshmdtshmctl 4. 实例代码测试共享内存5. 共享内存相关命令6. System V 消息队列&#xff08;了解&#xff09;7. System V 信号量&#xff08;了解&#xff09; 共享内存区是最快的 IPC 形式。一旦这样…...

编程日记 2024/5/7 12:14:09

拼多多标准推广怎么玩

拼多多标准推广的玩法主要包括以下方面&#xff1a; 拼多多推广可以使用3an推客。3an推客&#xff08;CPS模式&#xff09;给商家提供的营销工具&#xff0c;由商家自主设置佣金比例&#xff0c;激励推广者去帮助商家推广商品链接&#xff0c;按最终有效交易金额支付佣金&…...

编程日记 2024/5/7 12:13:08

HFSS学习-day2-T形波导的优化设计

入门实例–T形波导的内场分析和优化设计 HFSS--此实例优化设计 优化设计要求1. 定义输出变量Power31、Power21、和Power11&#xff0c;表示Port3、Port2、Port1的输出功率2.参数扫描分析添加扫描变量和输出变量进行一个小设置添加输出变量进行扫描分析 3. 优化设计&#xff0c…...

编程日记 2024/5/7 12:12:07

贪吃蛇小游戏（c语言）

1.效果展示 屏幕录制 2024-04-28 205129 2.基本功能 • 贪吃蛇地图绘制 • 蛇吃食物的功能 &#xff08;上、下、左、右方键控制蛇的动作&#xff09; • 蛇撞墙死亡 • 蛇撞自身死亡 • 计算得分 • 蛇身加速、减速 • 暂停游戏 3.技术要点 C语言函数、枚举、结构…...

编程日记 2024/5/7 12:09:03

多商户Docker Supervisor进程管理器部署

Dockerfile 根目录下没有Dockerfile的可以复制下面的命令 # 使用基础镜像 FROM leekay0218/crmeb-mer## 复制代码 ## 在本地调试注释掉&#xff0c;使用映射把文件映射进去 #ADD ./ /var/www# 设置工作目录 WORKDIR /var/www# 设置时区为上海 ENV TZAsia/Shanghai RUN ln -sn…...

编程日记 2024/5/7 12:08:02

Vue--》从零开始打造交互体验一流的电商平台（一）

今天开始使用 vue3 ts 搭建一个电商项目平台&#xff0c;因为文章会将项目的每处代码的书写都会讲解到&#xff0c;所以本项目会分成好几篇文章进行讲解&#xff0c;我会在最后一篇文章中会将项目代码开源到我的github上&#xff0c;大家可以自行去进行下载运行&#xff0c;希…...

编程日记 2024/5/7 12:04:59

uniapp 自定义相机插件（组件版、缩放、裁剪）组件 Ba-CameraView

自定义相机插件&#xff08;组件版、缩放、裁剪&#xff09; Ba-CameraView 简介&#xff08;下载地址&#xff09; Ba-CameraView 是一款自定义相机拍照组件&#xff0c;支持任意界面&#xff0c;支持裁剪 支持任意自定义界面支持手势缩放支持裁剪&#xff08;手势拖动、比…...

编程日记 2024/5/7 12:00:56

如何在Python中生成随机密码？

你可以使用Python的random模块来生成随机密码。下面是一个生成随机密码的简单示例代码&#xff1a; import random import stringdef generate_random_password(length):characters string.ascii_letters string.digits string.punctuationpassword .join(random.choice(c…...

编程日记 2024/5/7 11:58:54

GEE筛选行政区的两种野路子：手绘个圈圈或者随便点个点，就能搞定研究区边界

GEE自定义研究区边界&#xff1a;交互式绘图与动态筛选实战指南 当研究区域无法用标准行政区划描述时&#xff0c;传统GIS工作流程往往陷入数据准备的泥潭。本文介绍两种Google Earth Engine&#xff08;GEE&#xff09;中高效定义不规则边界的创新方法&#xff0c;特别适合生态…...

编程新知 2026/5/11 2:52:35

NVIDIA Profile Inspector深度指南：解锁显卡隐藏性能的完整教程

NVIDIA Profile Inspector深度指南&#xff1a;解锁显卡隐藏性能的完整教程 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 还在为游戏画面撕裂、输入延迟高、帧率不稳定而烦恼吗&#xff1f;NVIDIA Pr…...

编程新知 2026/5/11 0:47:24

Rust异步运行时：从Tokio到生产环境实践

Rust异步运行时&#xff1a;从Tokio到生产环境实践 引言 异步编程是现代高性能后端服务的关键技术。Rust通过async/await语法和强大的运行时实现&#xff0c;提供了卓越的异步性能。 本文将深入探讨Rust的异步运行时&#xff0c;包括Tokio、async-std等运行时的原理、使用方法和…...

编程新知 2026/5/10 23:03:08

英伟达巨额投资，四大云巨头财报亮眼，半导体产业扩张背后隐忧浮现

物理世界产能成为瓶颈云收入快速增长支撑巨头大规模投资。2026年第一季度&#xff0c;谷歌云、微软Azure、亚马逊AWS云业务表现出色&#xff0c;四家公司云业务合计季度营收超700亿美元&#xff0c;同比增长超40%。但物理世界产能受限&#xff0c;谷歌、微软、亚马逊订单积压严…...

编程新知 2026/5/10 22:47:45

别再只配防火墙了！华为USG+交换机联动配置实战：让内网用户顺利上网的完整闭环

华为USG防火墙与交换机联动配置&#xff1a;构建企业内网安全上网的完整方案 当企业内网用户反馈无法访问互联网时&#xff0c;很多网络工程师的第一反应是检查防火墙配置。然而&#xff0c;真实情况往往是防火墙只是整个网络出口链条中的一环。本文将从一个完整的网络架构视角…...

编程新知 2026/5/10 21:49:52

创优必看！鲁班奖工程的八项基本要求

创优必看！鲁班奖工程的八项基本要求 作为建筑工程行业的最高级别奖项，鲁班奖的评选工作严格贯彻执行国家有关基本建设的法律、法规和方针政策，以及国家、行业现行的技术标准、施工规范和技术规程。那么，什么样的工程才能荣获鲁班奖呢？ 本文根据《鲁班奖评选工作细则》总…...

编程新知 2026/5/10 21:37:29

Adobe-GenP 3.0：AutoIt实现的Adobe CC二进制补丁机制深度分析

Adobe-GenP 3.0&#xff1a;AutoIt实现的Adobe CC二进制补丁机制深度分析 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP Adobe Creative Cloud系列软件作为创意行业…...

编程新知 2026/5/10 21:37:22

KMS_VL_ALL_AIO实战指南：Windows与Office智能激活高效方案

KMS_VL_ALL_AIO实战指南&#xff1a;Windows与Office智能激活高效方案 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 你是否曾为Windows系统激活问题而烦恼&#xff1f;Office软件突然变成只读…...

编程新知 2026/5/10 21:08:49

怎样轻松配置黑苹果系统：OpenCore Configurator新手友好的终极指南

怎样轻松配置黑苹果系统&#xff1a;OpenCore Configurator新手友好的终极指南 【免费下载链接】OpenCore-Configurator A configurator for the OpenCore Bootloader 项目地址: https://gitcode.com/gh_mirrors/op/OpenCore-Configurator 还在为复杂的黑苹果引导配置而…...

编程新知 2026/5/10 18:42:57

抖音下载终极指南：免费获取无水印高清视频的完整解决方案

抖音下载终极指南&#xff1a;免费获取无水印高清视频的完整解决方案 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback su…...

编程新知 2026/5/10 18:36:52