脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序wxss加载图片并实现动画

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

 更新时间：2018年08月13日 10:20:20   投稿：mrr  
记录微信小程序中使用wxss加载图片并实现动画的方式，最终实现loading效果。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧

记录微信小程序中使用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对数组对象的各种操作

    最近有个同事问了个问题，关于数组，对象和类数组的，仔细说起来都是基础，其实都没什么好讲的，不过看到还是有很多朋友有些迷糊，决定还是写出来吧，下面这篇文章主要给大家介绍了Javascript对数组对象的各种操作,需要的朋友可以参考借鉴。
    2017-01-01
  • js深拷贝与浅拷贝一文彻底搞懂

    js深拷贝与浅拷贝一文彻底搞懂

    这篇文章主要介绍了js深拷贝与浅拷贝一文彻底搞懂,需要的朋友可以参考下
    2022-04-04
  • 详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】

    详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】

    本篇文章主要介绍了JavaScript的延迟对象、跨域、模板引擎、弹出层、AJAX，对其进行示例解析，具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • JS字符串转GBK编码超精简实现详解

    JS字符串转GBK编码超精简实现详解

    JS中GBK编码转字符串是非常简单的，但反过来，字符串转GBK编码却没这么简单。接下来本文就将带大家一起康康JS如何实现字符串转GBK编码，需要的可以参考一下
    2022-08-08
  • JavaScript下利用fso判断文件是否存在的代码

    JavaScript下利用fso判断文件是否存在的代码

    JavaScript下利用fso判断文件是否存在的代码，需要的朋友可以参考下，这个一般需要运行确认的。
    2010-12-12
  • JS查找数组中重复元素的方法详解

    JS查找数组中重复元素的方法详解

    这篇文章主要介绍了JS查找数组中重复元素的方法,结合具体实例形式对比分析了javascript针对数组的遍历、判断、排序等相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • javascript实现tabs选项卡切换效果(扩展版)

    javascript实现tabs选项卡切换效果(扩展版)

    常用的页面效果有弹出层效果，无缝滚动效果，选项卡切换效果，接下来与大家分享一款自己用原生javascript写的选项卡切换效果在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果
    2013-03-03
  • 微信小程序登录态和检验注册过没的app.js写法

    微信小程序登录态和检验注册过没的app.js写法

    这篇文章主要介绍了小程序登录态和检验注册过没的app.js写法, 本文通过实例代码给大家介绍的非常详细，具有一定的借鉴价值，需要的朋友可以参考下
    2019-05-05
  • 原生js滑动轮播封装

    原生js滑动轮播封装

    这篇文章主要为大家详细介绍了原生js滑动轮播封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • Javascript中关于Array.filter()的妙用详解

    Javascript中关于Array.filter()的妙用详解

    大家应该都知道filter是Javascript中Array常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。下面这篇文章就给大家介绍了关于Javascript中Array.filter()的妙用，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12

最新评论