记录微信小程序中使用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编码后的数据。

css-js.com/tools/base64.html">图片转base64的方法

总结

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