微信小程序中使用wxss加载图片并实现动画效果

记录微信小程序中使用wxss加载图片并实现动画的方式，最终实现loading效果。

代码

说明

• @keyframes a

定义了动画为旋转动画，1turn为旋转一圈；

• animation 属性

一个简写属性，用于设置动画属性，steps为逐帧动画；

• background

background中url传入用于动画的图片，传入的为图片base64编码，data:image/png;base64,为Data URI scheme，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了。

在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

总结

以上所述是小编给大家介绍的微信小程序中使用wxss加载图片并实现动画效果。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!