微信小程序中使用wxss加载图片并实现动画效果
作者:mrr 时间:2024-04-29 13:15:27
记录微信小程序中使用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加载图片并实现动画效果网站的支持!
来源:https://juejin.im/entry/5a3a71af6fb9a0450d113b54
标签:微信小程序,wxss,加载图片


猜你喜欢
JavaScript判断浏览器运行环境的详细方法
2024-04-22 12:53:28

利用ASP+JMAIL进行邮件群发的新思路
2008-03-20 13:30:00
Python中urllib+urllib2+cookielib模块编写爬虫实战
2023-10-21 19:02:35

python复制文件到指定目录的实例
2021-03-17 17:10:26
关于Python解包知识点总结
2021-01-03 22:34:15
sqlserver 快速生成汉字的首拼字母的函数(经典)
2012-06-06 20:16:41
Python时间和字符串转换操作实例分析
2023-04-15 22:58:08
MySQL数据库事务隔离级别介绍(Transaction Isolation Level)
2024-01-18 05:54:11

使用Pandas修改DataFrame中某一列的值
2021-04-14 14:52:21

根据Dreamweaver里的ToolTip代码改进的提示框
2008-11-27 12:19:00
Python将list元素转存为CSV文件的实现
2022-03-14 20:15:00

Python 文件操作的详解及实例
2021-06-05 12:59:12
不通过数据源名DSN也能访问Access数据库吗?
2009-10-29 12:22:00
python实现简单学生信息管理系统
2022-01-28 12:40:00

innerHTML,outerHTML,innerText,outerText用法
2008-02-15 12:22:00
python生成lmdb格式的文件实例
2021-07-18 21:57:05
python缺失值的解决方法总结
2023-07-28 23:47:38
详解python中各种文件打开模式
2023-08-30 09:10:30
23个很棒的Python脚本集合分享(迷你项目)
2023-12-24 04:34:15
php中session_id()函数详细介绍,会话id生成过程及session id长度
2023-11-24 08:01:00