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

css3+js 画出爱心特效

news 2026/3/28 10:09:05

要使用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

vLLM-v0.17.1镜像部署实战：从零开始搭建大模型推理服务

vLLM-v0.17.1镜像部署实战&#xff1a;从零开始搭建大模型推理服务 1. vLLM框架简介 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;它通过创新的内存管理和批处理技术&#xff0c;显著提升了LLM的推理效率和服务吞吐量。这个项目最初由加州大学伯克利…...

编程新知 2026/3/28 10:06:42

Agent 帮不了你，不是因为它不够聪明

上一篇我们分析了 CLI vs MCP 的争论本质上是在讨论"管道"&#xff0c;而真正缺的是"水龙头"。这篇继续往下挖&#xff1a;就算水龙头开了&#xff0c;你也大概率接不上。Agent 在现实中寸步难行的原因&#xff0c;比大多数人想的更结构化。 一个常见的许诺…...

编程新知 2026/3/28 9:18:21

PyTorch 2.5快速部署指南：3步开启你的AI模型训练之旅

PyTorch 2.5快速部署指南&#xff1a;3步开启你的AI模型训练之旅 1. PyTorch 2.5环境准备 PyTorch 2.5作为当前最流行的深度学习框架之一&#xff0c;带来了多项性能优化和新特性。在开始之前&#xff0c;我们需要确保环境配置正确。 1.1 系统要求检查 操作系统&#xff1a…...

编程新知 2026/3/28 7:29:15

低成本工业机器人：开源六轴机械臂从技术原理到生态落地全指南

低成本工业机器人&#xff1a;开源六轴机械臂从技术原理到生态落地全指南 【免费下载链接】Faze4-Robotic-arm All files for 6 axis robot arm with cycloidal gearboxes . 项目地址: https://gitcode.com/gh_mirrors/fa/Faze4-Robotic-arm 技术原理&#xff1a;打破工…...

编程新知 2026/3/28 6:52:50

小程序签名组件避坑指南：从米字格绘制到图片生成的完整流程

小程序签名组件开发实战&#xff1a;从米字格绘制到图片生成的深度解析 在小程序开发中&#xff0c;签名功能的需求日益增多&#xff0c;无论是电子合同签署、教育类应用的字帖练习&#xff0c;还是个性化签名设计&#xff0c;都需要一个稳定高效的签名组件。本文将深入探讨如何…...

编程新知 2026/3/28 6:48:50

VisionPro实战：CogGraphicCollection在工业检测中的5个高效用法（附代码）

VisionPro实战&#xff1a;CogGraphicCollection在工业检测中的5个高效用法&#xff08;附代码&#xff09; 在工业自动化领域&#xff0c;机器视觉系统正变得越来越智能和高效。作为康耐视VisionPro平台的核心组件之一&#xff0c;CogGraphicCollection为工程师提供了强大的图…...

编程新知 2026/3/28 5:24:03

OpenClaw安全实践：GLM-4.7-Flash本地化部署的权限控制指南

OpenClaw安全实践&#xff1a;GLM-4.7-Flash本地化部署的权限控制指南 1. 为什么需要关注OpenClaw的权限控制&#xff1f; 去年夏天&#xff0c;我在整理电脑上的财务报告时&#xff0c;无意中发现OpenClaw自动将我的税务文件同步到了一个陌生目录。这个意外让我意识到——当…...

编程新知 2026/3/28 4:50:05

[具身智能-125]：RQT（Robot Qt），一个可以全方位监控ROS2系统内部节点工作状态的可视化超级终端！！！

如果说 RViz2 是机器人的“眼睛”&#xff08;看 3D 世界&#xff09;&#xff0c;那么 RQT 就是机器人的“听诊器”和“控制台”。它基于 Qt 框架开发&#xff0c;采用插件化架构&#xff0c;让你能在一个窗口里完成对 ROS2 系统内部状态的全方位监控与调试。为了让你更好地利…...

编程新知 2026/3/28 4:34:01

【STM32实战】步进电机S型曲线算法优化与误差补偿策略

1. 为什么需要S型曲线算法 我第一次用步进电机做项目时&#xff0c;直接给电机发固定频率的脉冲让它转起来。结果电机启动瞬间发出"咔咔"的异响&#xff0c;运行起来也一顿一顿的。后来才知道&#xff0c;步进电机最怕的就是突然加速或急停&#xff0c;这会导致丢步、…...

编程新知 2026/3/28 3:49:44

OpenClaw密码管理：nanobot安全存储与自动填充方案

OpenClaw密码管理&#xff1a;nanobot安全存储与自动填充方案 1. 为什么需要本地化的密码管理方案 去年的一次数据泄露事件让我彻底放弃了所有云端密码管理器。当时我使用的某知名商业工具突然弹出安全警报&#xff0c;提示"您的部分密码可能已被未授权访问"。虽然…...

编程新知 2026/3/28 3:19:16