tailwind 简单动画

原创
02/06 17:42
阅读数 98

 

原文链接: tailwind 简单动画

只有几个简单的动画, 但可以自定义, 一般开发足够用了

默认所有效果都是1s时间, 重复执行

 

配置触发时机

    variants: {
      extend: {
        // ...
       animation: ['hover', 'focus'],
      }
    }

顺时针旋转 

  <div class="bg-blue-500 w-8 h-8 animate-spin"></div>

 

出现放大

  <div class="bg-blue-500 w-8 h-8 animate-ping"></div>

 

闪烁

  <div class="bg-blue-500 w-8 h-8 animate-pulse"></div>

弹跳

  <div class="bg-blue-500 w-8 h-8 animate-bounce"></div>

 

可以实现一个涟漪的效果

注意需要使用absolute定位, 以及动画只能加在子元素上, 不然父元素也会一直闪


  <div class="inline-flex items-center w-8 h-8">
    <span class="flex relative h-3 w-3 top-0 right-0 -mt-1 -mr-1">
      <span
        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"
      ></span>
      <span
        class="relative inline-flex rounded-full h-3 w-3 bg-purple-500"
      ></span>
    </span>
  </div>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
tailwind的动画是Charlotte
02/26 15:15
回复
举报
更多评论
打赏
1 评论
0 收藏
0
分享
返回顶部
顶部