微信小程序开发-76种动画 animate.css

1、微信小程序动画有自己的方法:官方链接

但需要自己去写动画效果,比较麻烦。

2、本文介绍的是把animate.css这个非常棒的css库引入到小程序内使用。

animate.css包含76种动画,使用非常简单。animate.css官网

3、由于小程序对代码大小限制比较大,所以删除了animate.css中 所有@-webkit-部分css,减少了一半体积

再把文件后缀名改为wxss,以后出来的百度小程序、支付宝小程序、今日头条小程序估计修改对应的后缀名就可以直接使用了。

点击此处下载:http://nodejs999.com/animate.wxss

4、放到小程序代码中,然后@import到app.wxss文件中。

我项目是把animate.wxss文件放在utils文件夹下。

所以在app.wxss中加入 @import './utils/animate.wxss'; 即可。

就可以像animate.css一样使用了。

意外金喜的博客:http://blog.csdn.net/zzwwjjdj1

更多小程序文章:http://blog.csdn.net/zzwwjjdj1/article/details/79351547

扫描体验动画:在红包页和合作页,添加了很多动画。

  • 7
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值