css3+js 画出爱心特效

要使用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来实现爱心效果的动画。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/48176.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

玩转单元测试之gmock

引言 前文我们学习了gtest相关的使用&#xff0c;单靠gtest&#xff0c;有些场景仍然无法进行测试&#xff0c;因此就诞生了gmock。 gmock快速入门 在引入gtest时&#xff0c;gmock也同样引入了&#xff0c;因此只需要在编译时加上合适的编译选项即可&#xff0c;注意不同版…

算法通关村十一关 | 位运算实现加法和乘法

1.位实现加法和乘法 在计算机中&#xff0c;位运算的效率要比加减乘除的效率更高&#xff0c;因此在高性能软件中源码中大量使用&#xff0c;计算机里各种运算基本上都是位运算。 学习下面内容之前建议先学习位运算规则&#xff1a;算法通关村十一关 | 位运算的规则_我爱学算…

【MaxKey对接一】对接gitlab的oauth登录

MaxKey的Oauth过程 引导进入 GET http://{{maxKey_host}}/sign/authz/oauth/v20/authorize?client_idYOUR_CLIENT_ID&response_typecode&redirect_uriYOUR_REGISTERED_REDIRECT_URI 登录后回调地址 YOUR_REGISTERED_REDIRECT_URI/?code{{code}} 换取Access Token GET…

winform使用usercontrol 构建了一个复杂的列表,列表速度慢该如何优化?

当使用 WinForms 构建复杂的列表时&#xff0c;可能会面临性能问题&#xff0c;特别是在数据量大或 UI 复杂的情况下。以下是一些优化策略&#xff0c;可以帮助您改善列表的性能&#xff1a; 1. **虚拟模式 (Virtual Mode)**&#xff1a;对于大型数据集&#xff0c;考虑使用虚…

「UG/NX」Block UI 曲线收集器CurveCollector

✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C+&#

docker 01(初识docker)

一、docker概念 Docker是一个开源的应用容器引擎&#xff1b;诞生于2013年初&#xff0c;基于Go 语言实现&#xff0c;dotCloud公司出品(后改名为Dockerlnc);Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的Linux …

网络安全设备篇——加密机

加密机是一种专门用于数据加密和解密的网络安全设备。它通过使用密码学算法对数据进行加密&#xff0c;从而保护数据的机密性和完整性。加密机通常被用于保护敏感数据&#xff0c;如金融信息、个人身份信息等。 加密机的主要功能包括&#xff1a; 数据加密&#xff1a;加密机使…

探究Java spring中jdk代理和cglib代理!

面对新鲜事物&#xff0c;我们要先了解在去探索事物的本质-默 目录 一.介绍二者代理模式 1.1.Jdk代理模式 1.2cglib代理模式 1.3二者区别 1.3.1有无接口 1.3.2灵活性 1.4对于两种代理模式的总结 1.4.1jdk代理模式 1.4.2cglib代理模式 二.两种代理模式应用场景 2.1jd…

数学建模-多元线性回归笔记

数学建模笔记 1.学模型✅ 2.看专题论文并复习算法 多元线性回归 无偏性&#xff1a;预测值与真实值非常接近一致性&#xff1a;样本量无限增大&#xff0c;收敛于待估计参数的真值如何做&#xff1a;控制核心解释变量和u不相关 四类模型回归系数的解释 截距项不用考虑一元线性…

搜狗拼音占用了VSCode及微信小程序开发者工具快捷键Ctrl + Shit + K 搜狗拼音截图快捷键

修改搜狗拼音的快捷键 右键--更多设置--属性设置--按键--系统功能快捷键--系统功能快捷键设置--取消Ctrl Shit K的勾选--勾选截屏并设置为Ctrl Shit A 微信开发者工具设置快捷键 右键--Command Palette--删除行 微信开发者工具快捷键 删除行&#xff1a;Ctrl Shit K 或…

【开源项目】Stream-Query的入门使用和原理分析

前言 无意间发现了一个有趣的项目&#xff0c;Stream-Query。了解了一下其基本的功能&#xff0c;可以帮助开发者省去Mapper的编写。在开发中&#xff0c;我们会编写entity和mapper来完成业务代码&#xff0c;但是Stream-Query可以省去mapper&#xff0c;只写entity。 快速入…

CSDN编程题-每日一练(2023-08-22)

CSDN编程题-每日一练(2023-08-22) 一、题目名称:最长递增区间二、题目名称:K树三、题目名称:小Q的价值无向图一、题目名称:最长递增区间 时间限制:1000ms内存限制:256M 题目描述: 给一个无序数组,求最长递增的区间长度。如:[5,2,3,8,1,9] 最长区间 2,3,8 长度为 3。…

分布式事务理论基础

今天啊&#xff0c;本片博客我们一起来学习一下微服务中的一个重点和难点知识&#xff1a;分布式事务。 我们会基于Seata 这个框架来学习。 1、分布式事务问题 事务&#xff0c;我们应该比较了解&#xff0c;我们知道所有的事务&#xff0c;都必须要满足ACID的原则。也就是 …

Hadoop集群搭建(hadoop-3.3.5)

一、修改服务器配置文件 1、配置环境变量 vim /etc/profile #java环境变量 export JAVA_HOME/usr/local/jdk/jdk8 export JRE_HOME$JAVA_HOME/jre export CLASSPATH$JAVA_HOME/lib:$JRE_HOME/lib:$CLASSPATH export PATH$JAVA_HOME/bin:$JRE_HOME/bin:$PATH #hadoop环境变量 …

c++关键字 =delete和=default

在C的类中&#xff0c;有四类特殊的成员函数&#xff1a;① 默认构造函数&#xff1b;② 拷贝构造函数&#xff1b;③ 拷贝赋值函数&#xff08;operator&#xff09;&#xff1b;④ 析构函数&#xff1b;它们控制着类的实例的创建、初始化、拷贝以及销毁。 &#xff08;1&…

前端开发怎么解决前端安全性的问题? - 易智编译EaseEditing

前端安全性是保护前端应用程序免受恶意攻击和数据泄露的重要方面。以下是一些解决前端安全性问题的关键方法&#xff1a; 输入验证与过滤&#xff1a; 对所有用户输入进行验证和过滤&#xff0c;防止恶意用户通过注入攻击等手段破坏应用程序或获取敏感信息。 跨站点脚本&#…

[.NET/WPF] CommunityToolkit.Mvvm 异步指令

我们在开发中, 经常会有这样的需求: 点击按钮后, 进行一些耗时的工作工作进行时, 按钮不可再次被点击工作进行时, 会显示进度条, 或者 “加载中” 的动画 RelayCommand CommunityToolkit.Mvvm 中的 RelayCommand 除了支持最简单的同步方法, 还支持以 Task 作为返回值的异步方…

【接口不对外暴露-过滤器】业务开发,接口不能对外暴露的3种实现方案

一、内外网接口微服务隔离 将对外暴露的接口和对内暴露的接口分别放到两个微服务上&#xff0c;一个服务里所有的接口均对外暴露&#xff0c;另一个服务的接口只能内网服务间调用。 需要额外编写一个只对内部暴露接口的微服务&#xff0c;将所有只能对内暴露的业务接口聚合到…

【数据结构入门指南】二叉树

【数据结构入门指南】二叉树 一、二叉树的概念二、现实中的二叉树三、特殊的二叉树四、二叉树的性质五、二叉树的存储结构5.1 顺序结构5.2 链式结构 一、二叉树的概念 二叉树是一棵特殊的树。一棵二叉树是结点的一个有限集合&#xff0c;该节点&#xff1a; ①&#xff1a;或者…

Spring Boot实现IP地址解析

一、本地解析 如果使用本地ip解析的话&#xff0c;我们将会借助ip2region&#xff0c;该项目维护了一份较为详细的本地ip地址对应表&#xff0c;如果为了离线环境的使用&#xff0c;需要导入该项目依赖&#xff0c;并指定版本&#xff0c;不同版本的方法可能存在差异。 <d…