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

在现代网页中，我们经常可以在一些文章、视频和图片页面上找到一个“Like”按钮，通过点击这个按钮，我们可以表达我们对内容的喜欢或不喜欢。大多数“Like”按钮都是纯文本按钮或图像按钮，如果你想让它们有特殊的动画效果，那么我们需要使用 CSS3 什么的。本文为大家带来了一个带有心形哈希动画的 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>

同时定义了一个事件，当心形按钮被点击时，CSS类会在like和like之间切换。

接下来就是定义点击后出现在心形按钮周围的元素，主要是一些彩色圆点和一些不同样式和颜色的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"></div>
<div class="dot dot-7"></div>
<div class="dot dot-8"></div>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-1"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-2"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-3"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-4"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-5"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-6"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-7"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-8"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="110" width="110" viewBox="0 0 320 320" class="fly fly-1"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="110" width="110" viewBox="0 0 320 320" class="fly fly-2"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>

到目前为止，我们已经使用 HTML 和 SVG 来绘制 Like 心形按钮和被点击的动画元素。接下来就是添加相应的CSS来实现动画效果了。

CSS 代码

首先是SVG心形按钮的CSS代码，是点击前的默认样式：

svg.like {

  position: fixed;
  z-index: 10;
  top: calc(50vh - 160px);
  left: calc(50vw - 160px);
  border-radius: 100%;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  box-shadow: 0 0 250px rgba(0, 0, 0, 0.4);
  background: #212121;
  cursor: pointer;
}

然后点击按钮后，CSS类会切换到like，此时按钮会闪烁，很多彩色的点和心会飞来飞去。闪烁动画的代码如下：

body.liked svg.like {
  -webkit-animation: blink 1s forwards;
          animation: blink 1s forwards;
}
@-webkit-keyframes blink {
  10% {
    -webkit-transform: scale(0.42);
            transform: scale(0.42);
    background: #8815b7;
  }
  100% {
    background: #e01f4f;
  }
}
@keyframes blink {
  10% {
    -webkit-transform: scale(0.42);
            transform: scale(0.42);
    background: #8815b7;
  }

  100% {
    background: #e01f4f;
  }
}

小圆点和小心脏飞入的动画代码如下：

body.liked svg.fly.fly-1 {
  -webkit-animation: fly-1 1s 0.1s;
          animation: fly-1 1s 0.1s;
}
body.liked svg.fly.fly-2 {
  -webkit-animation: fly-2 1s 0.1s;
          animation: fly-2 1s 0.1s;
}
@-webkit-keyframes fly-1 {
  25% {
    margin: -100px 0 0 100px;
  }
  75% {
    margin: 100px 0 0 -100px;
    z-index: 5;
  }
  100% {
    z-index: 11;
  }
}
@keyframes fly-1 {
  25% {
    margin: -100px 0 0 100px;
  }
  75% {
    margin: 100px 0 0 -100px;
    z-index: 5;
  }
  100% {
    z-index: 11;

  }
}
@-webkit-keyframes fly-2 {
  25% {
    margin: -100px 0 0 -100px;
  }
  75% {
    margin: 100px 0 0 100px;
    z-index: 5;
  }
  100% {
    z-index: 11;
  }
}
@keyframes fly-2 {
  25% {
    margin: -100px 0 0 -100px;
  }
  75% {
    margin: 100px 0 0 100px;
    z-index: 5;
  }
  100% {
    z-index: 11;
  }
}

@ >

最后，我们还贴出了彩点和小心脏的CSS代码：

div.dot {
  width: 12px;
  height: 12px;
  background: white;
  position: fixed;
  z-index: 9;
  border-radius: 100%;
  top: calc(50vh - 6px);

  left: calc(50vw - 6px);
}
div.dot:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 100%;
  top: -20px;
  left: 2px;
  position: absolute;
  background: white;
}
div.dot:after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 100%;
  top: -160px;
  left: 2px;
  position: absolute;
  background: white;
  display: none;
}
body.liked div.dot {
  opacity: 0;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  background: #00e5ff;
  transition: opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;
  transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s;
  transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;
}
body.liked div.dot:after {
  display: block;
}

body.liked div.dot.dot-2 {
  -webkit-transform: rotate(45deg) translateY(-100px);
          transform: rotate(45deg) translateY(-100px);
}
body.liked div.dot.dot-3 {
  -webkit-transform: rotate(90deg) translateY(-100px);
          transform: rotate(90deg) translateY(-100px);
}
body.liked div.dot.dot-4 {
  -webkit-transform: rotate(135deg) translateY(-100px);
          transform: rotate(135deg) translateY(-100px);
}
body.liked div.dot.dot-5 {
  -webkit-transform: rotate(180deg) translateY(-100px);
          transform: rotate(180deg) translateY(-100px);
}
body.liked div.dot.dot-6 {
  -webkit-transform: rotate(225deg) translateY(-100px);
          transform: rotate(225deg) translateY(-100px);
}
body.liked div.dot.dot-7 {
  -webkit-transform: rotate(270deg) translateY(-100px);
          transform: rotate(270deg) translateY(-100px);
}
body.liked div.dot.dot-8 {
  -webkit-transform: rotate(305deg) translateY(-100px);
          transform: rotate(305deg) translateY(-100px);
}

到这里，整个Like love 按钮动画就完成了。文末源代码也献给大家。

源码下载

我已经编译了一个完整的源代码包，供大家下载学习。

源码下载链接：

代码仅供参考学习，请勿用于商业用途。

最后总结

这个类似SVG和CSS的按钮很有创意，适合在一些商品展示平台上使用。另外，对于like后出现的彩色圆点和心形，你也可以发挥想象力，修改或添加其他元素，因为SVG非常灵活，你可以轻松画出任何你喜欢的形状。