微信小程序中使用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 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
js中开关变量使用实例
Feb 24 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
React实现轮播效果
Aug 25 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版(1)
2006/10/09 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
用python删除java文件头上版权信息的方法
2014/07/31 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
详解python tkinter模块安装过程
2020/01/06 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
Python实现随机爬山算法
2021/01/29 Python
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
在职证明书范本(2014新版)
2014/09/25 职场文书
兵马俑导游词
2015/02/02 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android