Skip to content

动画

旋转

使用 animate-spin 给元素添加旋转动画效果。

html
<button type="button" class="btn primary">
  <i class="animate-spin icon icon-spinner-indicator"></i> 加载中
</button>

水波纹

使用 animate-ping 给元素添加水波纹动画。

html
<button type="button" class="btn primary">
  <i class="animate-ping icon icon-thumbs-up"></i> 赞!
</button>

脉冲

使用 animate-pulse 给元素添加脉冲动画。

html
<div class="animate-pulse rounded w-full max-auto flex px-4 py-4">
  <div class="w-16 h-16 bg-primary circle">
  </div>
  <div class="flex-1 h-16 px-4 ">
    <div class="h-4 w-48 bg-primary mb-2 rounded"></div>
    <div class="h-4 w-96 bg-primary mb-2 rounded"></div>
    <div class="h-4 flex-1 bg-primary rounded"></div>
  </div>
</div>

弹跳

使用 animate-bounce 给元素添加弹跳动画。

html
<button type="button" class="btn primary">
  <i class="bounce icon icon-arrow-down"></i> 下载
</button>

MIT License (MIT)