Tailwind CSS 是一款极其适合前端工程师和设计师使用的 CSS 框架，提供了一系列实用的 CSS 工具类，可以在很短的时间内快速构建出漂亮的界面。在使用 Tailwind CSS 时，我们可以轻松实现很多动画效果，比如进度条动画，本文将介绍在 Tailwind CSS 中实现进度条动画效果的技巧。
立即实现进度条动画
我们先来实现一个进度条的基础效果。以下是 HTML 和 CSS 代码：
<div class="w-full h-4 rounded-lg bg-gray-200"> <div class="h-full rounded-lg bg-green-400"></div> </div>
-- -------------------- ---- ------- -- ----- -- ------------- --- - ---------- ------------ -- -------- -- - -- ----- -- ---------- ------------ - -- - ------ --- - ---- - ------ ----- - -
以上代码表示了一个进度条，包含一个父元素和一个子元素。我们将父元素的宽度设置为 100%，高度设置为 4px，圆角设置为 4px。将子元素的高度设置为 100%，圆角也设置为 4px，并设置背景色为绿色。接着，我们为子元素添加动画效果，使用了 CSS3 的 animation 属性，属性值是我们自己写的动画名称 progress-bar，动画持续时间为 2s，动画缓冲函数为 ease-out。我们还使用了一个 @keyframes 规则，定义了名为 progress-bar 的动画，包括了动画时间轴上两个百分比值，在动画开始处，子元素的宽度为 0%，在动画结束了时候它的宽度增加到了 100%。
此时的效果是一个简单的进度条动画效果。但是，这里有几个缺点：
- 没有显示进度的百分比，用户无法直接了解当前的进度。
- 无法进行下一轮进度的重置，即无法再次触发进度条的动画效果。
接下来，我们将改进这个进度条动画。
实现显示进度百分比的效果
我们可以通过 CSS 伪类 ::before 来在进度条中显示当前进度的百分比。将以下代码添加到进度条父元素的样式中：
.progress-bar::before {
content: attr(data-progress);
position: absolute;
right: 0;
font-size: 12px;
line-height: 4px;
}以上代码为父元素添加了一个伪元素 ::before，使用 content 属性来设置元素的内容为属性 data-progress 的值。接下来，将元素的 position 属性设置为 absolute，让其定位在父元素的右侧。然后，通过设置 font-size 和 line-height 属性，将进度百分比的文本居中对齐。最后，你可以在 HTML 中添加一个 data-progress 属性来将实际进度值传递给伪元素。
新的 HTML 和 CSS 代码如下：
<div class="w-full h-4 rounded-lg bg-gray-200 progress-bar" data-progress="50%"> <div class="h-full rounded-lg bg-green-400"></div> </div>
-- -------------------- ---- ------- -- ----- -- ------------- --- - ---------- ------------ -- -------- --------- - -- ----- -- ---------- ------------ - -- - ------ --- - ---- - ------ ----- - - -- ------ -- --------------------- - -------- -------------------- --------- --------- ------ -- ---------- ----- ------------ ---- -
注意，我们修改了动画属性的值。原本 animation 属性值为 animation: progress-bar 2s ease-out 1; 有我们已使用 animation-fill-mode: forwards; 将其修改为 animation: progress-bar 2s ease-out forwards;，以确保进度条在动画完成后不返回其原始状态。
现在，我们已经成功添加了进度条百分比显示效果。当进度条动画运行时，它将在进度条右侧显示当前进度的百分比。
实现进度条的重置效果
如果我们希望单击按钮时能够重新启动进度条动画，该怎么做呢？我们可以使用 JavaScript 获取父元素对象，然后更改 data-progress 属性的值来重新启动进度条动画。
以下是 HTML 按钮和 JavaScript 代码，用于按下时重新启动进度条动画：
-- -------------------- ---- -------
------- ---------------------------------------------
--------
-------- -------------------- -
----- ----------- - ----------------------------------------
---------------------------- - -----
------------- -- -
---------------------------- - -------
-- ----
-
---------以上代码首先获取了类名为 .progress-bar 的元素对象，然后将它的 data-progress 属性值重置为 0%，并在 10 毫秒后将它的 data-progress 属性值重置为 100%，以启动进度条动画。我们将 JavaScript 代码添加到 HTML 页面的页尾。
现在我们已经成功实现了进度条的重置效果。
总结
在 Tailwind CSS 中实现进度条动画效果并不难，我们可以使用 CSS3 的 animation 属性来设置进度条动画，并使用伪类 ::before 来实现进度百分比的显示效果。另外，我们还可以通过 JavaScript 来重新启动进度条动画。
希望本文能够为你在 Tailwind CSS 中实现进度条动画效果提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64782d21968c7c53b046eaba