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

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

news 2025/11/7 17:57:05

        随着前端技术的发展，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

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/9/23 9:00:33

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/11/1 17:00:58

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/10/31 1:15:07

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/11/7 14:06:31

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/11/3 2:07:14

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2025/10/29 17:36:05

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/11/2 11:51:13

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2025/11/7 0:25:33