微信小程序中使用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各种复制代码收集
Sep 20 Javascript
js字符编码函数区别分析
Dec 28 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 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基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
图解js图片轮播效果
2015/12/20 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
canvas的神奇用法
2017/02/03 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
使用graphics.py实现2048小游戏
2015/03/10 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
pytorch进行上采样的种类实例
2020/02/18 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
顶岗实习接收函
2014/01/09 职场文书
搞笑车尾标语
2014/06/23 职场文书
市场策划求职信
2014/08/07 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
换届选举主持词
2015/07/03 职场文书