⼩程序中使⽤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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMD 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加载图⽚并实现动画效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。