今天向各位看官介绍下使用Tailwind CSS创建动态SVG图标。

案例一：扩展和收缩

首先，我为菜单创建了一个 SVG 图标，如下所示。

1、创建按钮部分

首先，我们将使用 Tailwind CSS 来设置按钮的基本样式，代码如下。

<button
  type="button"
  class="rounded-full bg-gray-700 px-4 py-2 font-bold text-white hover:bg-gray-900"
>
  MENU
</button>

该按钮现展现如下所示。

Tailwind CSS 基本上结合了这些class来创建 UI 样式，例如 rounded-full 显示圆角，bg-gray-700 使背景颜色变成灰色等。 有关每个实用程序类的详细信息，请参阅官方文档。

2、创建一个图标

接下来，创建 SVG 图标部分。 使用设计工具创建一个完整的图标，将其划分为要设置动画的每个路径，并将每个路径导出为 SVG。

3、设置 svg 元素的样式

导出的 SVG 如下所示。

<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  width="24"
  height="24"
  viewBox="0 0 24 24"
>
  <line x1="2" y1="5" x2="22" y2="5" stroke="black" stroke-width="2" />
</svg>

提取 <line> 元素并将它们组合成具有相同 viewBox 的一个 SVG。 删除了Stroke属性和Stroke-widht属性并在<svg>元素的类中指定。

 <svg
+  class="stroke-gray-50 stroke-2"
   xmlns="http://www.w3.org/2000/svg"
   fill="none"
   width="24"
   height="24"
   viewBox="0 0 24 24"
 >
-  <line x1="2" y1="5" x2="22" y2="5" stroke="black" stroke-width="2"/>
+  <line x1="2" y1="5" x2="22" y2="5" />
+  <line x1="2" y1="12" x2="18" y2="12" />
+  <line x1="2" y1="19" x2="22" y2="19" />
 </svg>

然后，为 <line> 元素编写动画。

 <button
   type="button"
+  class="group inline-flex items-center gap-2 rounded-full bg-gray-700 px-4 py-1.5 font-semibold text-white hover:bg-gray-900"
 >
   MENU
   <svg ...>
     <line x1="2" y1="5" x2="22" y2="5" />
-    <line x1="2" y1="12" x2="18" y2="12" />
+    <line x1="2" y1="12" x2="18" y2="12"
+      class="transition group-hover:translate-x-[-0.5px] group-hover:scale-x-125" />
-    <line x1="2" y1="19" x2="22" y2="19" />
+    <line x1="2" y1="19" x2="22" y2="19"
+       class="transition group-hover:translate-x-[1px] group-hover:scale-x-50" />
   </svg>
 </button>

关于 group-hover:scale-x-125 和 group-hover:scale-x-50，首先，scale-x 类在 x 方向上拉伸元素。 为要拉伸的元素设置了scale-x-125，为要收缩的元素设置了scale-x-50。 可以通过在类前写hover:*等来表示。 还允许您根据父元素的状态设置元素的样式。 如果将组类分配给父 <button> 元素，并在后代元素的 <line> 中写入 group-hover:*，则即使将鼠标悬停在 <button> 上，样式也会应用于 <line> 元素元素。

综上所述，通过在父元素中编写 group 类并在 <line> 元素中编写 group-hover:scale-* 类，即使将鼠标悬停在父元素上，<line> 元素也会扩展和收缩。

动画的其余部分是使用过渡类完成的，并且对位置进行微调。