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

CSS3实现彩色变形爱心动画【附源码】

news 2025/9/19 10:47:45

        随着前端技术的发展，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实现彩色变形爱心动画【附源码】

随着前端技术的发展&#xff0c;CSS3 为我们提供了丰富的动画效果&#xff0c;使得网页设计更加生动和有趣。今天&#xff0c;我们将探讨如何使用 CSS3 实现一个彩色变形爱心加载动画特效。这种动画不仅美观&#xff0c;而且可以应用于各种网页元素&#xff0c;比如加载指示器或…...

编程日记 2024/7/11 18:38:16

【JVM基础篇】Java的四种垃圾回收算法介绍

文章目录 垃圾回收算法垃圾回收算法的历史和分类垃圾回收算法的评价标准标记清除算法优缺点 复制算法优缺点 标记整理算法&#xff08;标记压缩算法&#xff09;优缺点 分代垃圾回收算法&#xff08;常用&#xff09;JVM参数设置使用Arthas查看内存分区垃圾回收执行流程分代GC算…...

编程日记 2024/7/11 18:35:13

Kodcloud可道云安装与一键发布上线实现远程访问详细教程

文章目录 1.前言2. Kodcloud网站搭建2.1. Kodcloud下载和安装2.2 Kodcloud网页测试 3. cpolar内网穿透的安装和注册4. 本地网页发布4.1 Cpolar云端设置4.2 Cpolar本地设置 5. 公网访问测试6.结语 1.前言 本文主要为大家介绍一款国人自研的在线Web文件管理器可道云&#xff0c;…...

编程日记 2024/7/11 18:34:12

python杨辉三角的两种书写方式

第一种&#xff08;设置二维列表设置每个元素为0进行替换元素&#xff09; 代码演示&#xff1a; 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…...

编程日记 2024/7/11 18:33:11

【CSS in Depth 2精译】2.5 无单位的数值与行高

当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高 ✔️2.6 自定义属性2.7 本章小结 2.5 无单位的数值与行高 有些属性允许使用无单位的数值&#xff08;unitless value…...

编程日记 2024/7/11 18:31:09

【人脸识别、Python实现】PyQt5人脸识别管理系统

PyQt5人脸识别管理系统 项目描述主要功能效果展示获取源码 项目描述 接的一个基于宿舍管理系统与人脸识别的小单子。然后我把它优化了一些&#xff0c;现在开源一下。有需要的小伙伴自取&#xff0c;点个免费的关注就行 主要功能 1、录入学生基本信息、录入人脸 2、主页面展…...

编程日记 2024/7/11 18:29:05

软设之观察者模式

设计模式中&#xff0c;观察者模式的意图是:定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 比如说&#xff0c;有一个新闻网站&#xff0c;订阅的用户众多&#xff0c;假如说管理员发布了一…...

编程日记 2024/7/11 18:28:04

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版…...

编程日记 2024/7/11 18:27:03

09磁盘管理

一、磁盘管理 1.磁盘基础知识 &#xff08;1&#xff09;磁盘接口类型 个人电脑&#xff0c; 硬盘接口分为IDE类型和SATA类型 服务器版分为SCSI类型和SAS类型 &#xff08;2&#xff09;磁盘命名方式 windows中硬盘命名方式是c&#xff0c;d,e盘 linux中硬盘命名方式为 系统…...

编程日记 2024/7/11 18:25:01

Node.js Stream

Node.js Stream Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它允许开发者使用 JavaScript 编写服务器端代码。Node.js 的一个核心特性是其对流&#xff08;Stream&#xff09;的处理能力。流是一种在 Node.js 中处理读/写文件、网络通信或任何端到端…...

编程日记 2024/7/11 18:22:59

简化嵌入式Linux开发：在Ubuntu上安装和配置交叉编译环境的高效方法

在嵌入式Linux开发中&#xff0c;我们通常需要在Ubuntu上安装交叉编译工具链&#xff0c;并配置相关文件。编译过程中&#xff0c;如果遇到依赖库问题&#xff0c;还需要手动查找并编译开源源码。这些步骤较为繁琐&#xff0c;为了简化操作&#xff0c;我们可以尝试以下方案&am…...

编程日记 2024/7/11 18:21:58

Photoshop批量处理图片分辨率

整理一些文件的时候&#xff0c;发现需要处理大量图片的尺寸和分辨率。如果一张一张的处理就会很慢&#xff0c;搜了下&#xff0c;Photoshop提供自动批量处理的方法。在此记录一下。 一、说说批量处理图片 1.打开PS软件并导入图片&#xff0c;我用的是比较老的版本cs4&#…...

编程日记 2024/7/11 18:17:53

TCP协议的三次握手和四次挥手（面试）

三次握手 首先可以简单的回答&#xff1a; 1、第一次握手&#xff1a;客户端给服务器发送一个 SYN 报文。 2、第二次握手&#xff1a;服务器收到 SYN 报文之后&#xff0c;会应答一个 SYNACK 报文。 3、第三次握手&#xff1a;客户端收到 SYNACK 报文之后&#xf…...

编程日记 2024/7/11 18:16:51

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…...

编程日记 2024/7/11 18:15:50

springboot在线教育平台-计算机毕业设计源码68562

摘要 在数字化时代&#xff0c;随着信息技术的飞速发展&#xff0c;在线教育已成为教育领域的重要趋势。为了满足广大学习者对于灵活、高效学习方式的需求&#xff0c;基于Spring Boot的在线教育平台应运而生。Spring Boot以其快速开发、简便部署以及良好的可扩展性&#xff0c…...

编程日记 2024/7/11 18:14:49

形态学图像处理

1 工具 1.1 灰度腐蚀和膨胀 当平坦结构元b的原点是(x,y)时&#xff0c;它在(x,y)处对图像f的灰度腐蚀定义为&#xff0c;图像f与b重合区域中的最小值。结构元b在位置(x,y)处对图像f的腐蚀写为&#xff1a; 类似地&#xff0c;当b的反射的原点是(x,y)时&#xff0c;平坦结构元…...

编程日记 2024/7/11 18:13:48

安泰电压放大器的选型方案是什么

电压放大器是一种常见的电路元件&#xff0c;广泛应用于各种电子设备中。在选择电压放大器的时候&#xff0c;我们需要考虑一系列因素&#xff0c;以确保选型方案能够满足实际需求。下面安泰电子将详细介绍电压放大器选型的主要考虑因素&#xff0c;包括应用需求、技术性能、成…...

编程日记 2024/7/11 18:12:46

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 …...

编程日记 2024/7/11 18:11:45

MySQL和Redis更新一致性问题

1. 先更新数据库&#xff0c;再更新缓存 适用场景&#xff1a;适用于对数据一致性要求不是特别高&#xff0c;且缓存更新失败对 系统影响较小的场景。例如&#xff0c;某些非关键数据的缓存更新。 风险&#xff1a;如果缓存更新失败&#xff0c;会导致数据库和缓存数据不一致。…...

编程日记 2024/7/11 18:09:43

（19）夹钳(用于送货)

文章目录 前言 1 常见的抓手参数 2 参数说明 前言 Copter 支持许多不同的抓取器&#xff0c;这对送货应用和落瓶很有用。 按照下面的链接&#xff08;或侧边栏&#xff09;&#xff0c;根据你的设置了解配置信息。 Electro Permanent Magnet v3 (EPMv3)Electro Permanent M…...

编程日记 2024/7/11 18:08:42

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/8/10 21:01:28

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/9/18 20:41:53

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/8/17 10:25:39

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/9/7 8:50:41

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/9/9 10:10:19

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/9/9 10:09:37

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/9/2 11:57:55