今天向各位看官介绍下使用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。

SVG绘制过程

3、设置 svg 元素的样式

导出的 SVG 如下所示。

<svg  xmlns=";  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=";   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> 元素也会扩展和收缩。

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