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

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

代码

.weui-loading {
margin: 0 5px;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
animation: a 1s steps(12) infinite;
background: transparent url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsixmjaiighlawdodd0imtiwiib2awv3qm94psiwidagmtawidewmci+phbhdgggzmlsbd0ibm9uzsigzd0ittagmggxmdb2mtawsdb6ii8+phjly3qgd2lkdgg9ijciighlawdodd0imjaiihg9ijq2ljuiihk9ijqwiibmawxspsijrtlfouu5iibyed0insigcnk9ijuiihryyw5zzm9ybt0idhjhbnnsyxrlkdagltmwksivpjxyzwn0ihdpzhropsi3iibozwlnahq9ijiwiib4psi0ni41iib5psi0mcigzmlsbd0iizk4oty5nyigcng9ijuiihj5psi1iib0cmfuc2zvcm09injvdgf0zsgzmcaxmduuotggnjupii8+phjly3qgd2lkdgg9ijciighlawdodd0imjaiihg9ijq2ljuiihk9ijqwiibmawxspsijoui5otlbiibyed0insigcnk9ijuiihryyw5zzm9ybt0icm90yxrlkdywidc1ljk4idy1ksivpjxyzwn0ihdpzhropsi3iibozwlnahq9ijiwiib4psi0ni41iib5psi0mcigzmlsbd0ii0ezqtfbmiigcng9ijuiihj5psi1iib0cmfuc2zvcm09injvdgf0zsg5mca2nsa2nskilz48cmvjdcb3awr0ad0inyigagvpz2h0psiymciged0indyunsiget0indaiigzpbgw9iinbqke5queiihj4psi1iibyet0insigdhjhbnnmb3jtpsjyb3rhdguomtiwidu4ljy2idy1ksivpjxyzwn0ihdpzhropsi3iibozwlnahq9ijiwiib4psi0ni41iib5psi0mcigzmlsbd0ii0iyqjjcmiigcng9ijuiihj5psi1iib0cmfuc2zvcm09injvdgf0zsgxntagntqumdignjupii8+phjly3qgd2lkdgg9ijciighlawdodd0imjaiihg9ijq2ljuiihk9ijqwiibmawxspsijqkfcoei5iibyed0insigcnk9ijuiihryyw5zzm9ybt0icm90yxrlkde4mca1mca2nskilz48cmvjdcb3awr0ad0inyigagvpz2h0psiymciged0indyunsiget0indaiigzpbgw9iindmkmwqzeiihj4psi1iibyet0insigdhjhbnnmb3jtpsjyb3rhdguolte1mca0ns45oca2nskilz48cmvjdcb3awr0ad0inyigagvpz2h0psiymciged0indyunsiget0indaiigzpbgw9iindqkncq0iiihj4psi1iibyet0insigdhjhbnnmb3jtpsjyb3rhdguolteymca0ms4znca2nskilz48cmvjdcb3awr0ad0inyigagvpz2h0psiymciged0indyunsiget0indaiigzpbgw9iinemkqyrdiiihj4psi1iibyet0insigdhjhbnnmb3jtpsjyb3rhdguoltkwidm1idy1ksivpjxyzwn0ihdpzhropsi3iibozwlnahq9ijiwiib4psi0ni41iib5psi0mcigzmlsbd0ii0rbrefeqsigcng9ijuiihj5psi1iib0cmfuc2zvcm09injvdgf0zsgtnjagmjqumdignjupii8+phjly3qgd2lkdgg9ijciighlawdodd0imjaiihg9ijq2ljuiihk9ijqwiibmawxspsijrtjfmkuyiibyed0insigcnk9ijuiihryyw5zzm9ybt0icm90yxrlkc0zmcatns45oca2nskilz48l3n2zz4=) no-repeat;
background-size: 100%;
background-image: '../../resources/icon_api.png';
}
@keyframes a {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}

说明

• @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加载图片并实现动画效果，希望对大家有所帮助