CSS3实现彩色变形爱心动画【附源码】
随着前端技术的发展，CSS3 为我们提供了丰富的动画效果，使得网页设计更加生动和有趣。今天，我们将探讨如何使用 CSS3 实现一个彩色变形爱心加载动画特效。这种动画不仅美观，而且可以应用于各种网页元素，比如加载指示器或者页面装饰。
准备工作
在开始之前，请确保你的浏览器支持 CSS3 动画。现代的浏览器，如 Chrome、Firefox、Safari 和 Edge，都对 CSS3 动画有很好的支持。
HTML 结构
首先，我们需要一个简单的 HTML 结构来承载我们的动画。
<!DOCTYPE html>: 声明文档类型为HTML5。<html lang="en">: HTML文档的根元素，指定语言为英语。<head>: 包含了页面的元数据和引用的外部资源。
<meta charset="UTF-8">: 指定字符集为UTF-8，支持各种语言的字符。<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置移动设备的视口，确保页面在各种设备上显示正确。<meta http-equiv="X-UA-Compatible" content="ie=edge">: 设置IE浏览器使用最新的渲染模式。<title>css3彩色变形爱心加载动画特效</title>: 页面标题。
以下是一个基本的 HTML 代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3 彩色变形爱心加载动画特效</title>
</head>
<body><div id="he"><ul><li></li><!-- 重复li元素以创建更多的爱心 --></ul></div>
</body>
</html>CSS 样式
接下来是 CSS 部分，我们将使用 CSS3 的 @keyframes 规则来定义动画，并使用 animation 属性来应用这些动画。
* {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;
}
/* 定义动画 */
@keyframes love1 {30%, 50% {height: 60px;transform: translateY(-30px);}75%, 100% {height: 20px;transform: translateY(0);}
}
/* 根据需要，可以定义更多的动画，这里以love1为例 */
动画实现
在 CSS 中，我们定义了多个动画，每个动画对应一个爱心的变形过程。通过 animation-delay 属性，我们可以控制每个爱心动画的开始时间，从而实现连续的动画效果。
动画属性说明
animation: 指定动画的名称和持续时间。
animation-delay: 指定动画开始前需要等待的时间。
animation-direction: 指定动画播放后是否反向播放。
transform: 用于实现元素的变形效果，如translateY用于垂直移动。
*: 通用选择器，将所有元素的内边距和外边距设置为0，去除列表样式。#he: 设置ID为"he"的div元素样式。
width: 100%: 宽度占满父元素。display: flex; justify-content: center; align-items: center;: 使用Flex布局，水平和垂直居中元素。height: 100vh;: 设置高度为视窗的100%。background-color: #232e6d;: 设置背景颜色为深蓝色。ul: 设置ul元素的样式。
height: 200px;: 设置高度为200px。li: 设置li元素的样式。
float: left;: 左浮动排列。width: 20px; height: 20px;: 设置宽高为20px。border-radius: 20px;: 圆角半径为20px，使其呈现圆形。margin-right: 10px;: 右侧外边距为10px，用于控制元素之间的间距。li:nth-child(n): 使用伪类选择器，针对每个li元素设置不同的背景颜色和动画。@keyframes love1到love5: 定义了五个不同的关键帧动画，分别命名为love1到love5，用于实现爱心加载动画效果。
解析
在上面的 CSS 样式中，我们首先对整个页面进行了基本的样式重置，确保在不同浏览器中的一致性。然后，我们使用 Flexbox 将 <ul> 元素居中显示在页面中，并设置了背景色为深蓝色。
每个 <li> 元素被赋予不同的背景色，并通过 CSS 动画 @keyframes 定义了每个心形的变换效果。每个动画都是无限循环的，且有不同的延迟时间，以实现一种连贯的加载效果。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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{width: 100%; 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;
}/* 每个列表项的动画效果，通过nth-child进行区分 */li:nth-child(1){background-color: #f62e74;animation: love1 4s infinite;
}
li:nth-child(2){background-color: #f45330;animation: love2 4s infinite;animation-delay: 0.15s;
}
li:nth-child(3){background-color: #ffc883;animation: love3 4s infinite;animation-delay: 0.3s;
}
li:nth-child(4){background-color: #30d268;animation: love4 4s infinite;animation-delay: 0.45s;
}
li:nth-child(5){background-color: #006cb4;animation: love5 4s infinite;animation-delay: 0.6s;
}
li:nth-child(6){background-color: #784697;animation: love4 4s infinite;animation-delay: 0.75s;
}
li:nth-child(7){background-color: #ffc883;animation: love3 4s infinite;animation-delay: 0.9s;
}
li:nth-child(8){background-color: #f45330;animation: love2 4s infinite;animation-delay: 1.05s;
}
li:nth-child(9){background-color: #f62e74;animation: love1 4s infinite;animation-delay: 1.2s;
}
@keyframes love1{/* 动画的30%和50%时，高度变为60px，向上移动30px */30%,50%{height: 60px; transform: translateY(-30px);}/* 动画的75%到100%，高度恢复为20px，位置回到原点 */75%,100%{height: 20px; transform: translateY(0);}
}/* 定义其他动画love2, love3, love4, love5，模式与love1类似，只是高度和移动距离不同 */@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 动画的使用方法。如果你有任何问题或想要进一步探讨，欢迎在评论区交流。
相关文章：
CSS3实现彩色变形爱心动画【附源码】
随着前端技术的发展，CSS3 为我们提供了丰富的动画效果，使得网页设计更加生动和有趣。今天，我们将探讨如何使用 CSS3 实现一个彩色变形爱心加载动画特效。这种动画不仅美观，而且可以应用于各种网页元素，比如加载指示器或…...
【JVM基础篇】Java的四种垃圾回收算法介绍
文章目录 垃圾回收算法垃圾回收算法的历史和分类垃圾回收算法的评价标准标记清除算法优缺点 复制算法优缺点 标记整理算法（标记压缩算法）优缺点 分代垃圾回收算法（常用）JVM参数设置使用Arthas查看内存分区垃圾回收执行流程分代GC算…...
Kodcloud可道云安装与一键发布上线实现远程访问详细教程
文章目录 1.前言2. Kodcloud网站搭建2.1. Kodcloud下载和安装2.2 Kodcloud网页测试 3. cpolar内网穿透的安装和注册4. 本地网页发布4.1 Cpolar云端设置4.2 Cpolar本地设置 5. 公网访问测试6.结语 1.前言 本文主要为大家介绍一款国人自研的在线Web文件管理器可道云，…...
python杨辉三角的两种书写方式
第一种（设置二维列表设置每个元素为0进行替换元素） 代码演示： n eval(input("请输入想要的行数")) lst[[0 for j in range(n)] for i in range(n)] # lst2[[0]*n]*n for i in range(n):for j in range(i1):if j0 or ji:lst[i][j…...
【CSS in Depth 2精译】2.5 无单位的数值与行高
当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高 ✔️2.6 自定义属性2.7 本章小结 2.5 无单位的数值与行高 有些属性允许使用无单位的数值（unitless value…...
【人脸识别、Python实现】PyQt5人脸识别管理系统
PyQt5人脸识别管理系统 项目描述主要功能效果展示获取源码 项目描述 接的一个基于宿舍管理系统与人脸识别的小单子。然后我把它优化了一些，现在开源一下。有需要的小伙伴自取，点个免费的关注就行 主要功能 1、录入学生基本信息、录入人脸 2、主页面展…...
软设之观察者模式
设计模式中，观察者模式的意图是:定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。 比如说，有一个新闻网站，订阅的用户众多，假如说管理员发布了一…...
deep learning 环境配置
1 NVIDIA驱动安装 ref link: https://blog.csdn.net/weixin_37926734/article/details/123033286 2 cuda安装 ref link: https://blog.csdn.net/qq_63379469/article/details/123319269 进去网站 https://developer.nvidia.com/cuda-toolkit-archive 选择想要安装的cuda版…...
09磁盘管理
一、磁盘管理 1.磁盘基础知识 （1）磁盘接口类型 个人电脑， 硬盘接口分为IDE类型和SATA类型 服务器版分为SCSI类型和SAS类型 （2）磁盘命名方式 windows中硬盘命名方式是c，d,e盘 linux中硬盘命名方式为 系统…...
Node.js Stream
Node.js Stream Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许开发者使用 JavaScript 编写服务器端代码。Node.js 的一个核心特性是其对流（Stream）的处理能力。流是一种在 Node.js 中处理读/写文件、网络通信或任何端到端…...
简化嵌入式Linux开发：在Ubuntu上安装和配置交叉编译环境的高效方法
在嵌入式Linux开发中，我们通常需要在Ubuntu上安装交叉编译工具链，并配置相关文件。编译过程中，如果遇到依赖库问题，还需要手动查找并编译开源源码。这些步骤较为繁琐，为了简化操作，我们可以尝试以下方案&am…...
Photoshop批量处理图片分辨率
整理一些文件的时候，发现需要处理大量图片的尺寸和分辨率。如果一张一张的处理就会很慢，搜了下，Photoshop提供自动批量处理的方法。在此记录一下。 一、说说批量处理图片 1.打开PS软件并导入图片，我用的是比较老的版本cs4&#…...
TCP协议的三次握手和四次挥手（面试）
三次握手 首先可以简单的回答： 1、第一次握手：客户端给服务器发送一个 SYN 报文。 2、第二次握手：服务器收到 SYN 报文之后，会应答一个 SYNACK 报文。 3、第三次握手：客户端收到 SYNACK 报文之后…...
css看见彩虹，吃定彩虹
css彩虹 .f111 {width: 200px;height: 200px;border-radius: 50%;box-shadow: 0 0 0 5px inset red, 0 0 0 10px inset orange, 0 0 0 15px inset yellow, 0 0 0 20px inset lime, 0 0 0 25px inset aqua, 0 0 0 30px inset blue, 0 0 0 35px inset magenta;clip-path: polygo…...
springboot在线教育平台-计算机毕业设计源码68562
摘要 在数字化时代，随着信息技术的飞速发展，在线教育已成为教育领域的重要趋势。为了满足广大学习者对于灵活、高效学习方式的需求，基于Spring Boot的在线教育平台应运而生。Spring Boot以其快速开发、简便部署以及良好的可扩展性，…...
形态学图像处理
1 工具 1.1 灰度腐蚀和膨胀 当平坦结构元b的原点是(x,y)时，它在(x,y)处对图像f的灰度腐蚀定义为，图像f与b重合区域中的最小值。结构元b在位置(x,y)处对图像f的腐蚀写为： 类似地，当b的反射的原点是(x,y)时，平坦结构元…...
安泰电压放大器的选型方案是什么
电压放大器是一种常见的电路元件，广泛应用于各种电子设备中。在选择电压放大器的时候，我们需要考虑一系列因素，以确保选型方案能够满足实际需求。下面安泰电子将详细介绍电压放大器选型的主要考虑因素，包括应用需求、技术性能、成…...
ARMV8安全特性：Pointer Authentication
文章目录 前言一、Introduction二、Problem Definition三、Pointer Authentication3.1 Instructions3.2 Cryptography3.3 Key Management 四、Sample Use Cases4.1 Software Stack Protection4.2 Control Flow Integrity (CFI)4.3 Binding Pointers to Addresses 五、Security …...
MySQL和Redis更新一致性问题
1. 先更新数据库，再更新缓存 适用场景：适用于对数据一致性要求不是特别高，且缓存更新失败对 系统影响较小的场景。例如，某些非关键数据的缓存更新。 风险：如果缓存更新失败，会导致数据库和缓存数据不一致。…...
（19）夹钳(用于送货)
文章目录 前言 1 常见的抓手参数 2 参数说明 前言 Copter 支持许多不同的抓取器，这对送货应用和落瓶很有用。 按照下面的链接（或侧边栏），根据你的设置了解配置信息。 Electro Permanent Magnet v3 (EPMv3)Electro Permanent M…...
QuickLook.Plugin.OfficeViewer-Native：Office文件秒级预览的轻量化技术实现解析
QuickLook.Plugin.OfficeViewer-Native：Office文件秒级预览的轻量化技术实现解析 【免费下载链接】QuickLook.Plugin.OfficeViewer-Native View Word, Excel, and PowerPoint files with MS Office and WPS Office components. 项目地址: https://gitcode.com/gh_…...
终极Splide轮播组件路线图：从4.1.4到未来版本的升级指南与特性前瞻
终极Splide轮播组件路线图：从4.1.4到未来版本的升级指南与特性前瞻 【免费下载链接】splide Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors. 项目地址: https://gitcode.com/…...
Honey Select 2本地化增强补丁：技术实现与模块化架构深度解析
Honey Select 2本地化增强补丁：技术实现与模块化架构深度解析 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch HS2-HF Patch作为Honey Select 2游戏社…...
WebDataset商业应用：企业级深度学习项目的数据管理策略
WebDataset商业应用：企业级深度学习项目的数据管理策略 【免费下载链接】webdataset A high-performance Python-based I/O system for large (and small) deep learning problems, with strong support for PyTorch. 项目地址: https://gitcode.com/gh_mirrors/w…...
HY-Motion 1.0案例实录：从‘站立起身’到完整3D骨骼动画的端到端生成
HY-Motion 1.0案例实录：从站立起身到完整3D骨骼动画的端到端生成 1. 引言：动作生成的新里程碑 想象一下，你只需要用文字描述一个动作，就能立即生成流畅自然的3D骨骼动画。这不是科幻电影中的场景，而是HY-Motion 1.0带…...
Z-Image-Turbo_Sugar脸部Lora生成图像的后处理技巧：使用PS软件进行精修
Z-Image-Turbo_Sugar脸部Lora生成图像的后处理技巧：使用PS软件进行精修 AI生成图像，尤其是像Z-Image-Turbo_Sugar这类擅长生成甜美、精致人像的模型，已经能产出相当惊艳的初稿。但如果你仔细观察，会发现这些图片距离真正“完美”…...
Qwen-Turbo-BF16企业级部署方案：高可用架构设计
Qwen-Turbo-BF16企业级部署方案：高可用架构设计 1. 引言 想象一下这样的场景：你的电商平台正在经历促销活动，每秒涌入成千上万的图片生成请求。突然，某个GPU节点出现故障，整个服务开始变得不稳定，用户等待…...
广州创科助力南水水电站安全监测自动化升级
南水水电站位于广东韶关乳源，其大坝建于1958年，是目前世界上唯一仍在运行的定向爆破粘土斜墙堆石坝，曾获1978年全国科学大会科技成果奖，在我国水利建设史上具有里程碑意义。电站总库容12.84亿立方米，为韶关约130万人口…...
MTK新工程创建与调试全攻略，人形机器人的发展历程、技术演进与未来图景。
MTK调试：创建新工程指南 准备工作 确保已安装MTK官方开发环境，包括SDK、驱动程序和必要的工具链。下载最新版本的MTK开发包，解压到指定目录。检查系统环境变量是否配置正确，确保编译工具路径已加入PATH。 工程结构初始化 使用MTK提…...
LFM2.5-1.2B-Thinking-GGUF惊艳效果：32K上下文下长文档关键信息抽取准确率实测
LFM2.5-1.2B-Thinking-GGUF惊艳效果：32K上下文下长文档关键信息抽取准确率实测 1. 模型效果实测背景 LFM2.5-1.2B-Thinking-GGUF作为Liquid AI推出的轻量级文本生成模型，在低资源环境下展现出令人惊喜的性能表现。本次测试聚焦于模型在32K超长上下文环…...