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

css3+js 画出爱心特效

news 2025/9/14 13:20:42

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/9/14 9:31:49

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/9/1 12:53:45

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/9/7 8:52:29

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/9/9 14:50:29

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/23 18:46:38

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/7/13 23:45:42

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

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

从物理机到云原生：全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...

编程新知 2025/9/7 8:47:13