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

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

news 2026/1/29 14:09:41

试想一下，如果你的网站在加载过程中，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

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2026/1/27 23:11:24

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/1/18 3:11:35

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53