一个使用表情符号的纯 CSS 反应组件

2025-05-24

一个使用表情符号的纯 CSS 反应组件

与星级评定一样，反应组件在许多网站中被广泛使用，因此我在这里提供自己的实现：一个仅使用 CSS 的反应组件，可与表情符号或任何类型的自定义图标一起使用。

无需费心处理 SVG 或 PNG 图像。抓取您喜爱的表情符号，构建您自己的组件。

观看实际效果：

在上面，你会发现没有@keyframes。所有动画都仅使用 CSS transition 完成

它是如何工作的？

以上内容依赖于非常基本的 HTML 代码：

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

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

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

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

反应层

由于使用了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);
}
Enter fullscreen mode Exit fullscreen mode

它的过渡是尺度一（从0到1）然后是尺度二border-width（从calc(var(--r)/2)到0）

transition:
    transform 0.5s,
    border-width 0.5s 0.5s;
Enter fullscreen mode Exit fullscreen mode

--r是控制组件所有尺寸的变量。没错，它是可扩展的！你只需要调整一个变量就能控制整体尺寸。

[2]是我们的表情符号。这里没什么复杂的：

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

有趣的是从[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);
}
Enter fullscreen mode Exit fullscreen mode

每个圆圈由8个圆圈（4个红色和4个橙色）组成，排列成圆形。数学爱好者会注意到角度的sin()和的值。cos()N*45deg

它们的转变是先进行规模一（从0到1），然后进行background-size规模一（从上面定义的值到0），并结合opacity

transition:
    transform 0.5s 0.5s,
    opacity   0.4s 0.9s,
    background-size 0.5s 0.9s;
Enter fullscreen mode Exit fullscreen mode

最后，我们对元素应用了过渡效果<i>，这将同时影响[2]和[3]。我们有一个滤镜，可以让表情符号的颜色从灰色过渡到原始颜色，还有一个缩放效果。

对于缩放效果，我使用魔术函数来创建从到的cubic-bezier过渡。101

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

我在下面的文章中详细介绍了这种技术：

这就是学习

使用 cubic-bezier() 的高级 CSS 动画

Temani Afif 的《这就是学习》 ・ 2021 年 5 月 19 日

#css #webdev #教程 #codepen

我还添加了悬停时的摇动效果，其中我使用了cubic-bezier同一篇文章中详细介绍的另一个效果。

transition:transform 0.25s cubic-bezier(0.5,400,0.5,-400);
Enter fullscreen mode Exit fullscreen mode

就是这样！

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

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

PS：这个想法是受到我之前回答的一个 Stack Overflow 问题启发的：如何制作闪烁的按钮动画？。它与我的旧代码略有调整，但效果相同。

文章来源：https://dev.to/afif/a-css-only-reaction-component-using-emoji-28i4
Devto 翻译
PREV
可扩展的 CSS 打字机效果
NEXT
来自《鬼灭之刃》的 CSS 艺术