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


Posted in Javascript onAugust 13, 2018

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

图片转base64的方法

总结

以上所述是小编给大家介绍的微信小程序中使用wxss加载图片并实现动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
初识Node.js
Mar 20 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
JS改变页面颜色源码分享
Feb 24 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
Angular异步变同步处理方法
Aug 13 #Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 #Javascript
Vue自定义弹窗指令的实现代码
Aug 13 #Javascript
深入Vue-Router路由嵌套理解
Aug 13 #Javascript
AngularJS与后端php的数据交互方法
Aug 13 #Javascript
Vue Promise的axios请求封装详解
Aug 13 #Javascript
You might like
PHP中路径问题的解决方案
2006/10/09 PHP
php获取网页内容方法总结
2008/12/04 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
php 获取全局变量的代码
2011/04/21 PHP
php中设置多级目录session的问题
2011/08/08 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
json字符串对象转换代码实例
2019/09/28 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python遍历路径破解表单的示例
2020/11/21 Python
python二维图制作的实例代码
2020/12/03 Python
航空大学应届生求职信
2013/11/10 职场文书
五一服装活动方案
2014/01/11 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
人事局接收函
2015/01/30 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
python本地文件服务器实例教程
2021/05/02 Python
MySQL 分页查询的优化技巧
2021/05/12 MySQL