SVG 和 CSS3 实现一个超酷爱心 Like 按钮

最新推荐文章于 2024-03-18 14:36:36 发布

xuhss_com

最新推荐文章于 2024-03-18 14:36:36 发布

阅读量805

点赞数

分类专栏：计算机文章标签：计算机

本文链接：https://blog.csdn.net/xuhss_com/article/details/124211730

版权

本文介绍如何使用SVG和CSS3创建一个带有爱心散射动画的Like按钮。当点击按钮时，按钮周围会散发出五彩的爱心和小圆点，详细讲解了HTML、SVG和CSS代码实现过程，提供源码下载供学习参考。

摘要由CSDN通过智能技术生成

Python微信订餐小程序课程视频

https://blog.csdn.net/m0_56069948/article/details/122285951

Python实战量化交易理财系统

https://blog.csdn.net/m0_56069948/article/details/122285941
在现代网页中，我们经常可以在一些文章、视频和图片页面上找到”Like”按钮，并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢。大部分”Like”按钮是纯文本按钮或者图片按钮，如果你想让它们具有特别的动画特效，那么我们就需要用到CSS3或者JavaScript了。本文给大家带来一个带有爱心散列动画的Like按钮，主要采用了SVG和CSS3这两个技术。当你点亮Like按钮时，按钮的四周将会散发出多个五彩绚丽的爱心。

效果预览

代码实现

HTML代码

首先我们用SVG的Path路径绘制了一个爱心按钮：

<svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')">
 <path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90" fill="white"> 
svg>

同时定义了onclick事件，当点击这个爱心按钮时，CSS类将会在like和liked之间切换。

就下来就是定义爱心按钮点击后周围出现的元素，主要是一些五彩的小圆点和一些不同风格颜色的SVG小爱心，代码如下：

<div class="dot dot-1">div>
<div class="dot dot-2">div>
<div class="dot dot-3">div>
<div class="dot dot-4">div>
<div class="dot dot-5">div>
<div class="dot dot-6">