我用CSS和表情符号实现了一个点赞组件

点赞组件被广泛用于许多网站，所以今天我要介绍的就是：一个用纯CSS实现的点赞组件，可与表情符号或任何类型的自定义图标一起使用。

无需费心处理SVG或PNG图像。获取你喜欢的表情符号就可以构建你自己的组件，超酷！

来看看吧：

它是如何工作的？

以上动画依赖的是一些非常基本的HTML代码：

<input type="checkbox" id="r1">
<label for="r1" class="react">
<i data-icon="💯"></i>
</label>

没什么复杂的。一个<input>
及其对应的<label>
还有一个<i>
元素，就可以将我们的表情符号作为数据属性。就是这样！

所有的魔法都是使用CSS完成的，并且我们有不同的图层，如下图所示：

<input type="checkbox" id="r1">
<label for="r1" class="react">
  ::before [1]
  <i data-icon="💯">
    ::before [2]
    ::after [3]
  </i>
  ::after [4]
</label>

由于使用了display:inline-grid
和grid-area:1/1
，所有图层位于彼此之上。

[1]
是一个基本的圆，如下所示：

.react:before {
  content:"";
  grid-area:1/1;
  border-radius:50%;
  border:solid orange calc(var(--r)/2);
}

它的过渡是一个缩放（从0
到1
），然后是一个border-width
（从calc(var(--r)/2)
到0
）

transition:
    transform 0.5s,
    border-width 0.5s 0.5s;

--r
是控制组件大小的变量。是的，这是一个可扩展的变量！你只需要调整一个变量即可控制整体大小。

[2]
是表情符号。这一块没有什么复杂的：

.react i:before {
  content:attr(data-icon);
  grid-area:1/1;
  font-style:normal;
  font-size:calc(0.6*var(--r));
}

从[3]
和[4]
开始就有趣了。这些小圆圈通过多个radial-gradient
构建。[3]
和[4]
的区别在于圆的大小以及一个小的旋转以避免重叠：

.react:after,
.react i:after{
  content:"";
  grid-area:1/1;
  margin: calc(var(--r)/-2);
  --c1:radial-gradient(red    50%,#0000 60%);
  --c2:radial-gradient(orange 50%,#0000 60%);
  background:
    var(--c1),var(--c1),var(--c1),var(--c1),
    var(--c2),var(--c2),var(--c2),var(--c2); 
  background-size:calc(var(--r)/6) calc(var(--r)/6); 
  background-position:
    calc(50% - var(--r)/2) calc(50% - var(--r)/2),
    calc(50% + var(--r)/2) calc(50% - var(--r)/2),
    calc(50% - var(--r)/2) calc(50% + var(--r)/2),
    calc(50% + var(--r)/2) calc(50% + var(--r)/2),
    calc(50% +  0px) calc(50% + var(--r)*0.707),
    calc(50% + var(--r)*0.707) calc(50% +  0px),
    calc(50% - var(--r)*0.707) calc(50% +  0px),
    calc(50% +  0px) calc(50% - var(--r)*0.707);
  background-repeat:no-repeat;
  transform:scale(0);
}
.react i:after {
  background-size:calc(var(--r)/8) calc(var(--r)/8);
  transform:rotate(60deg) scale(0);
}

[3]
和[4]
都由8个圆（4红4橙）组成，并排列成圆形。数学爱好者请注意角度N*45deg
的sin()
和cos()
的值。

过渡也是一个缩放（从0到1），然后是background-size
（从上面定义的值到0）与opacity
相结合：

transition:
    transform 0.5s 0.5s,
    opacity   0.4s 0.9s,
    background-size 0.5s 0.9s;

最后，我们将过渡应用于将影响[2]
和[3]
的<i>
元素。我们有一个过滤器，它允许我们将灰色转换为表情符号的原始颜色并实现缩放。

对于缩放，我使用神奇的cubic-bezier
函数来创建从1到0再到1的转换。

transition:
   filter .5s .5s,
   transform 1s cubic-bezier(0,26.67,.5,26.67);

我还在悬停时添加了震动效果，使用的是另一个cubic-bezier
函数。

transition:transform 0.25s cubic-bezier(0.5,400,0.5,-400);

就是这样！

你所要做的就是从Font Awesome中选择表情符号或图标，然后调整--r
来控制大小就可以了哦。

我对初始代码做了一些小小的更改，以便能够使用Font Awesome图标，因为我们不需要定义content
，Font Awesome的CSS会为我们完成。

需要源码的同学，关注我们的公众号：前端新世界，回复关键字：点赞，即可获取下载链接。