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

css3+js 画出爱心特效

news 2025/10/30 10:11:47

要使用CSS3和JavaScript绘制爱心特效，可以使用CSS3的动画和过渡效果来创建爱心的形状，并使用JavaScript来控制动画的触发和交互。以下是一个简单的示例代码：

HTML:

<div class="heart"></div>
<button onclick="toggleAnimation()">Toggle Animation</button>

CSS:

.heart {width: 100px;height: 100px;position: relative;transform: rotate(-45deg);background: red;margin:100px
}.heart::before,
.heart::after {content: "";width: 100px;height: 100px;background: red;border-radius: 50%;position: absolute;
}.heart::before {top: -50px;left: 0;
}.heart::after {top: 0;left: 50px;
}@keyframes heartbeat {0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);}
}.heart.animate {animation: heartbeat 1s infinite;
}

JavaScript:

function toggleAnimation() {const heart = document.querySelector('.heart');heart.classList.toggle('animate');
}

在上述示例中，我们首先在HTML中创建一个包含爱心形状的<div>元素，并添加一个按钮来切换动画效果。然后，在CSS中，我们使用::before和::after伪元素来创建爱心的两个半圆形，并使用transform属性来旋转和定位它们，从而形成完整的爱心形状。我们还定义了一个名为heartbeat的关键帧动画，用于实现心跳效果。最后，在JavaScript中，我们定义了一个toggleAnimation函数，用于在点击按钮时添加或移除animate类，从而触发或停止动画效果。

您可以将上述代码复制到一个HTML文件中，并在浏览器中运行以查看爱心特效。点击按钮可以切换动画的启用和禁用状态。

请注意，这只是一个简单的示例，您可以根据需要进行更多的样式和交互调整

完整示例

这里是完整的示例代码：

<!DOCTYPE html>
<html>
<head><title>Heart Animation</title><style>.heart {width: 100px;height: 100px;position: relative;transform: rotate(-45deg);background: red;margin:100px}.heart::before,.heart::after {content: "";width: 100px;height: 100px;background: red;border-radius: 50%;position: absolute;}.heart::before {top: -50px;left: 0;}.heart::after {top: 0;left: 50px;}@keyframes heartbeat {0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);}}.heart.animate {animation: heartbeat 1s infinite;}</style>
</head>
<body><div class="heart"></div><button onclick="toggleAnimation()">Toggle Animation</button><script>function toggleAnimation() {const heart = document.querySelector('.heart');heart.classList.toggle('animate');}</script>
</body>
</html>

将上述代码复制到一个HTML文件中，并在浏览器中打开该文件，您将看到一个带有爱心形状和切换动画的按钮。点击按钮可以切换动画的启用和禁用状态。

另外一种实现方法

是因为clip-path属性在某些浏览器中不支持SVG路径。为了解决这个问题，我们可以使用另一种方法来实现爱心效果。以下是一个使用CSS和JavaScript的示例：

<!DOCTYPE html>
<html>
<head><title>Heart Animation</title><style>.heart {width: 100px;height: 100px;position: relative;animation: heartbeat 1s infinite;}.heart::before,.heart::after {content: '';position: absolute;top: 0;width: 52px;height: 80px;border-radius: 50px 50px 0 0;background: red;}.heart::before {left: 50px;transform: rotate(-45deg);transform-origin: 0 100%;}.heart::after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}@keyframes heartbeat {0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);}}</style>
</head>
<body><div class="heart"></div>
</body>
</html>

在上面的代码中，我们使用CSS的::before和::after伪元素来创建爱心的形状。通过调整伪元素的位置、大小和旋转角度，我们可以组合它们以形成爱心的形状。

将上述代码复制到一个HTML文件中，并在浏览器中打开该文件，您将看到一个使用CSS和JavaScript来实现爱心效果的动画。

相关文章：

css3+js 画出爱心特效

要使用CSS3和JavaScript绘制爱心特效&#xff0c;可以使用CSS3的动画和过渡效果来创建爱心的形状&#xff0c;并使用JavaScript来控制动画的触发和交互。以下是一个简单的示例代码&#xff1a; HTML: <div class"heart"></div> <button onclick&quo…...

编程日记 2023/8/19 4:59:42

蔚来李斌卖手机：安卓系统，苹果售价，一年一发

‍作者 | Amy 编辑 | 德新 车圈大佬的玩法真让人寻不着套路&#xff01; 苹果的库克和小米的雷布斯&#xff0c;甚至是FF贾老板准备许久&#xff0c;都想分一块新能源车的蛋糕&#xff0c;蔚来李斌却反手进军手机界&#xff0c;从宣布造手机到手机入网仅仅隔了一年。 近期&a…...

编程日记 2023/8/19 4:58:41

0008__浏览器层面缓存 Etag If-None-Match等详解

浏览器层面缓存 Etag & If-None-Match等详解_if-none-match:_shadow_zed的博客-CSDN博客...

编程日记 2023/8/19 4:57:40

Idea 快捷键整理

Idea快捷键和自动代码补全汇总 idea快捷键汇总 Ctrl 快捷键说明Ctrl F在当前文件进行文本查找 &#xff08;必备&#xff09;Ctrl R在当前文件进行文本替换 &#xff08;必备&#xff09;Ctrl Z撤销 &#xff08;必备&#xff09;Ctrl Y删除光标所在行 或 删除选中的行 &am…...

编程日记 2023/8/19 4:56:38

管理类联考——逻辑——真题篇——按知识分类——汇总篇——一、形式逻辑——假言——第一节 充分条件

文章目录 第一节　充分条件假言命题-那么，就，则真题（2013-29）-假言-充分假言-那么，就，则-变形推理真题（2014-44）-假言-充分假言-那么，就，则-（1）建模-“那么/就/则”-前推后真题（2018-37）-假言-充分假言-那么，就，则-（1）建模-“那么/就/则”-前推后；-（2）A→…...

编程日记 2023/8/19 4:55:37

LSTM模型

目录 LSTM模型 LSTM结构图 LSTM的核心思想 细胞状态 遗忘门 输入门 输出门 RNN模型 LRNN LSTM模型 什么是LSTM模型 LSTM (Long Short-Term Memory)也称长短时记忆结构,它是传统RNN的变体,与经典RNN相比能够有效捕捉长序列之间的语义关联,缓解梯度消失或爆炸现象.同时LS…...

编程日记 2023/8/19 4:54:36

抢红包小程序

抢红包小程序 红包大战 # urls.pyfrom django.urls import pathfrom . import viewsurlpatterns [ path(login/, views.login, namelogin), path(create_red_packet/, views.create_red_packet, namecreate_red_packet), path(join_red_packet/<int:red_packet_id…...

编程日记 2023/8/19 4:53:34

UVA 10006 埃氏筛法+快速幂

本题目使用费马定理时&#xff0c;我随机定义了10个数字&#xff0c;循环用费马小定理判断&#xff0c;数组中的值不用和我的相同&#xff0c;随机即可。 #include <iostream> using namespace std; typedef unsigned long long ll; bool isPrime[65007]; ll a[10]; voi…...

编程日记 2023/8/19 4:52:33

C++--红黑树

1.什么是红黑树 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长出俩倍&#xff0c;因…...

编程日记 2023/8/19 4:51:31

Unity 找不到 Navigation 组件的解决

当我们想利用unity 里面的Navigation 组件来实现我们的物体的自动导航时&#xff0c;有时竟然会发现我们的菜单栏里面找不到 该组件 这时我们应该怎么办&#xff1f; 请确保你的项目中已经导入了Unity的AI模块。要导入该模块&#xff0c;请打开"Project Settings"&am…...

编程日记 2023/8/19 4:50:30

【js】时间和时间戳转换、日期格式化

1、时间戳转换日期方法 &#xff08;格式&#xff1a;2023-08-17&#xff09; function timestampToDate(date) {var date new Date(date);var YY date.getFullYear() -;var MM (date.getMonth() 1 < 10 ? 0 (date.getMonth() 1) : date.getMonth() 1) -;var DD …...

编程日记 2023/8/19 4:48:28

glog体验第一天（0）glog介绍和安装

在Ubuntu上安装glog&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开终端&#xff0c;使用以下命令更新本地软件包列表&#xff1a; sudo apt-get update然后&#xff0c;使用以下命令安装glog库及其开发工具&#xff1a; sudo apt-get install -y libgoogle-glog-de…...

编程日记 2023/8/19 4:47:26

Android 13像Settings一样获取SIM卡信息

一.背景 由于客户定制的Settings里面需要获取到SIM卡信息，所以需要实现此功能。 目录 一.背景 二.前提条件 三.调用api 二.前提条件 首先应用肯定要是系统应用，并且导入framework.jar包，具体可以参考： Android 应用自动开启辅助(无障碍)功能并使用辅助(无障碍)功能_…...

编程日记 2023/8/19 4:46:25

Can‘t find end of central directory : is this a zip file ? at XMLHttpRequest

导出woed出现这个报错,原因其实很简单,路径写错了, 这个word首先必须是docx格式,然后必须放在public文件包下 如果放在public文件包下还没有用,则放在public包下 参考帖子: https://www.cnblogs.com/hejun26/p/13647927.html...

编程日记 2023/8/19 4:45:23

基于SpringBoot+Thymeleaf仓库管理系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着信息技术的快速发…...

编程日记 2023/8/19 4:44:22

ubuntu20.04磁盘满了 /dev/mapper/ubuntu--vg-ubuntu--lv 占用 100%

问题 执行 mysql 大文件导入任务&#xff0c;最后快完成了&#xff0c;查看结果发现错了&#xff01;悲催&#xff01;都执行了 两天了 The table ‘XXXXXX’ is full &#xff1f; 磁盘满了&#xff1f; 刚好之前另一个 centos 服务器上也出现过磁盘满了&#xff0c;因此&a…...

编程日记 2023/8/19 4:43:20

【制作npm包4】api-extractor 学习

制作npm包目录 本文是系列文章&#xff0c; 作者一个橙子pro&#xff0c;本系列文章大纲如下。转载或者商业修改必须注明文章出处 一、申请npm账号、个人包和组织包区别 二、了解 package.json 相关配置 三、 了解 tsconfig.json 相关配置 四、 api-extractor 学习 五、npm包…...

编程日记 2023/8/19 4:42:18

神经网络基础-神经网络补充概念-52-正则化网络的激活函数

概念 正则化是一种用于减少过拟合&#xff08;overfitting&#xff09;的技术&#xff0c;可以在神经网络的各个层次中应用&#xff0c;包括激活函数。激活函数的正则化主要目的是减少神经网络的复杂度&#xff0c;防止网络在训练集上过度学习&#xff0c;从而提高泛化能力。 …...

编程日记 2023/8/19 4:41:15

代码随想录训练营day56| 583. 两个字符串的删除操作 72. 编辑距离

TOC 前言 代码随想录算法训练营day56 一、Leetcode 583. 两个字符串的删除操作 1.题目 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 示例 1&#xff1a; 输入: word1 "sea",…...

编程日记 2023/8/19 4:40:13

神经网络基础-神经网络补充概念-55-为什么是ML策略

“ML策略”&#xff08;Machine Learning Strategies&#xff09;是指在解决机器学习问题时&#xff0c;采取的一系列方法、技巧和策略。选择适当的ML策略对于获得高质量的模型和结果非常重要。以下是为什么要考虑ML策略的一些原因&#xff1a; 问题适应性&#xff1a;不同的机…...

编程日记 2023/8/19 4:39:12

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/10/29 16:55:33

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/10/16 23:00:32

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/10/26 14:56:49

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2025/10/29 19:04:46

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/9/25 14:10:40

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2025/10/21 17:48:55

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/10/30 5:56:39