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

css3+js 画出爱心特效

news 2025/7/4 6:15:20

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

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/6/16 17:44:44

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/6/21 7:18:42

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/6/17 3:05:21

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/6/21 2:38:11

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/6/16 7:49:31

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2025/6/27 20:10:29

《Offer来了：Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了：Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了：Java面试核心知识点精讲（原理篇）》技术文章大纲核心主题：Java基础原理与面试高频考点Java虚拟机（JVM）原理Java并发编程原理Jav…...

编程新知 2025/6/26 9:04:13

Python 高级应用10：在python 大型项目中 FastAPI 和 Django 的相互配合

无论是python&#xff0c;或者java 的大型项目中&#xff0c;都会涉及到 自身平台微服务之间的相互调用&#xff0c;以及和第三发平台的 接口对接&#xff0c;那在python 中是怎么实现的呢&#xff1f; 在 Python Web 开发中&#xff0c;FastAPI 和 Django 是两个重要但定位不…...

编程新知 2025/6/20 23:42:32

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/6/19 5:53:34

【Java多线程从青铜到王者】单例设计模式(八)

wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本&#xff0c;sleep也是可以指定时间的&#xff0c;也就是说时间一到就会解除阻塞&#xff0c;继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒)&#xff0c;wait能被notify提前唤醒&#xf…...

编程新知 2025/6/26 10:07:51