微信小程序中使用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游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
深入浅析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 保留小数点
2009/04/21 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php中的常用魔术方法总结
2013/08/02 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
微信小程序开发探究
2016/12/27 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python实时获取cmd的输出
2015/12/13 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
css3的过滤效果简单实例
2016/08/03 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
终止劳动合同协议书
2014/04/14 职场文书
企业安全生产承诺书
2014/05/22 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书