微信小程序中使用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 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
JSONP基础知识详解
Mar 19 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
cookie的secure属性详解
2015/04/08 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
canvas的神奇用法
2017/02/03 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
深入浅析python with语句简介
2018/04/11 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
快速了解Python开发环境Spyder
2020/06/29 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
幼教毕业生自我鉴定
2014/01/12 职场文书
函授本科自我鉴定
2014/02/04 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
护士工作心得体会
2016/01/25 职场文书
怎样写好工作计划
2019/04/10 职场文书
Nginx快速入门教程
2021/03/31 Servers