如何用SVG和CSS3制作一个炫酷的爱心形状Like按钮？

本文共计1728个文字，预计阅读时间需要7分钟。

在当下网络中，我们常在一些文章、视频和图片页面上看到点赞按钮。点击该按钮可表达自己对内容的喜爱或反对。大部分点赞按钮是纯文字或图片形式。

在现代网页中，我们经常可以在一些文章、视频和图片页面上找到”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"> <!-- 80 by 70 --> </svg>

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