用户登录

在这个图像元素上添加一个 animate-spin,这个类会使用一个动画,动画的名字是 spin,这个动画是在 tailwind 里提前定义好的。完成这个动画的时长是 1s,动画的 timing-function 用的是 linear,动画的 iteration-count 设置的是 infinite,这样动画会一直播放。

再试一下 animate-ping, 还有一个 animate-pulse, 还有一个 animate-bounce。

打开 tailwind-config.js 这个配置文件,在这个配置对象的 theme extend 属性里面,扩展一下 animation。添加一个 spin-slow, 这个动画样式用一个 spin 这个动画,时长是 5s ,timing-function 是 linear,iteration-count 设置成 infinite。

复制一份,再添加一个 spin-slow-reverse, 在样式里面再添加一个 reverse,这样可以倒着播放动画。

在终端,重新编译一下 tailwind 样式,执行 npm run build:css。

下面我们可以用一下刚才定义的动画样式,在这个图像元素上面可以先用一下 tailwind 自带的 animate-spin。

然后再用一下 animate-spin-slow,完成动画的时间是 5s,所以转的比之前那个动画要慢一些。再试一下 animate-spin-slow-reverse。 现在这个旋转动画会倒着播放。

这里用的这个 animate-spin-slow 还有 animate-spin-slow-reverse 是我们在 tailwind 配置文件里自己定义的。

动画:Animation《 Tailwind 样式框架:杂项 》

统计

13228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点