微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图
实现思路
1.首先通过HTML+CSS实现加载动画的静态效果;
2.根据需求给每个动画设计不同的动画效果。
例如第一个加载图标的静态绘制
1、首先确定动画的盒子宽高;
2、设置盒子中每一个长方形的宽高以及定位(注意:此处需要将长方形的旋转中心点移动到长方形的右侧边终点,方便后期以该点旋转。);
3、通过长方形盒子的伪元素,设置显示的长方形背景和宽高,同时进行定位。
4、由于在第二步的时候,已经将旋转中心移动,此处我们直接对每一个盒子中长方形进行旋转(注意:旋转角度 = 360 / 盒子中长方形个数)。
.circle-line{
width: 100px;
height: 100px;
display: inline-block;
position: relative;
}
.circle-line text{
display: block;
width: 50%;
height: 5px;
opacity: .7;
position: absolute;
top: calc(50% - 2.5px);
left: 0px;
transform-origin: center right;
}
.circle-line text::before{
content: '';
display: block;
width: 15px;
height: 5px;
position: absolute;
top: 0;
right: 10px;
background-color: blue;
}
.circle-line text:nth-child(1){
transform: rotate(0deg);
}
.circle-line text:nth-child(2){
transform: rotate(45deg);
}
.circle-line text:nth-child(3){
transform: rotate(90deg);
}
.circle-line text:nth-child(4){
transform: rotate(135deg);
}
.circle-line text:nth-child(5){
transform: rotate(180deg);
}
.circle-line text:nth-child(6){
transform: rotate(225deg);
}
.circle-line text:nth-child(7){
transform: rotate(270deg);
}
.circle-line text:nth-child(8){
transform: rotate(315deg);
}
动画制作
观察发现动画只是针对每个长方形的透明度进行改变,所以动画采用从0.05到0.9的透明度循环改变。
@keyframes circle {
0%{
opacity: 0.05;
}
100%{
opacity: 0.9;
}
}
进行动画绑定
.circle-line text{
animation: circle 1.5s linear infinite;
}
动画绑定完成,发现所有的整个图标一起显示消失,那么也就是缺少了对单个个体的动画处理,延迟动画时间,使其依次渐变。
单个动画处理
.circle-line text:nth-child(1){
animation-delay: 0.2s;
}
.circle-line text:nth-child(2){
animation-delay: 0.4s;
}
.circle-line text:nth-child(3){
animation-delay: 0.6s;
}
.circle-line text:nth-child(4){
animation-delay: 0.8s;
}
.circle-line text:nth-child(5){
animation-delay: 1s;
}
.circle-line text:nth-child(6){
animation-delay: 1.2s;
}
.circle-line text:nth-child(7){
animation-delay: 1.4s;
}
.circle-line text:nth-child(8){
animation-delay: 1.6s;
}
注意:单个动画延迟的时间必须超过动画执行的总时间,防止一个动画执行完成后的卡顿。
总结
以上所述是小编给大家介绍的微信小程序实现自定义加载图标功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
微信小程序图标不支持html,微信小程序实现自定义加载图标功能相关推荐
- 【微信小程序】自定义加载动画3
目录 效果图 配置 版本1 版本2 结语 效果图 配置 配置方法参考上一篇文章:[微信小程序]自定义加载动画 版本1 Component({behaviors
- 【微信小程序】自定义加载动画4
目录 效果图 配置文件 结语 效果图 配置文件 配置方法参考上一篇文章:[微信小程序]自定义加载动画 组件源代码: Component({behaviors: [],properties: {
- 【微信小程序】自定义加载动画
前言 在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多. 通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代 ...
- C# 系统应用之TreeView控件 (一).显示树状磁盘文件目录及加载图标
在C#系统应用毕设U盘防御软件中需要实现文件不可恢复的删除,首先需要实现类似于资源管理器的界面,通过TreeView控件显示"我的电脑"所有磁盘文件树状目录并加载相应图标.显示结果 ...
- MFC加载图标,位图。LoadImage LoadIcon, LoadBitmap
MFC加载图标和位图,有2种方式,一种是从工程的资源中加载,一种是从文件加载. 先说图标的,图标格式为.ico,也就是我们常说的ICON图片. 我们直观的希望是加载ico使用LoadIcon()函数, ...
- AuToCAD启动自定义加载程序研究(转)
AuToCAD启动自定义加载程序研究(转) AuToCAD启动自定义加载程序研究(转) 2009年06月02日 星期二 下午 12:28 CAD文件加载顺序: acad2006.lsp ( ...
- mysql_connect() 不支持 请检查 mysql 模块是否正确加载
在上面文章的基础上配置PHP环境完成之后发现安装(discuz)论坛时候还是有问题! 函数名称 检查结果 建议 mysq ...
- android显示过程,Android 桌面加载图标过程分析
桌面应用图标流程 前言 本人工作上碰到这么一个需求,开发一款滤镜引擎,将桌面上所有的图标进行统一的滤镜化,这就需要了解一下整个桌面去取图标的过程,了解了整个过程,找到真正拿图标的地方,在真正取图标的地 ...
- webplayer 设置加载图标和屏蔽右键
为什么80%的码农都做不了架构师?>>> 以下是引用片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric ...
最新文章
- 看AI如何改变医疗影像学
- springboot初始化加载数据_Spring Boot配置数据加载大全
- mysql数据中文乱码_win10 系统解决mysql中文乱码问题
- java定义基础变量语句_java语言基础-变量
- 关于虚拟机第二块网卡eth1(仅主机模式)的配置问题
- 谷歌地图添加点击事件 Google Maps API V3: Add click event listener to all (multiple) marker
- 【script】python 解析 Windows日志(python-evtx)
- JavaScript实现AES算法加密和解密
- mysql存储数组类型的数据_mysql中怎么存储数组
- android 实现类似微信缓存和即时更新好友头像
- python包的init文件_Python模块包中__init__.py文件的作用
- JAVA开源协同过滤算法,推荐算法:协同过滤算法的介绍
- c语言爱心函数3D,C语言控制台打印3D爱心图案
- 1.3中国计算机网络发展情况
- 我们这么努力到底为了什么
- FonePaw Data Recovery for Mac(数据恢复)
- 线程安全问题经典案例---卖票
- excel 置信区间 计算_如何用excel计算95%的置信区间 | 在excle中如何进行区间估计...
- 深创学院创始人宝石参与《第24届中国国际高新技术成果交易会》
- 文书档案整理过程图文讲解
热门文章
- 解决xmarks不能用的方法
- linux远程连接工具
- 小白请上车 | Python抓取花瓣网高清美图
- 腾讯99公益日︱深圳市慈善会:那些无力的故事,都拥有了力量
- poj——3177Redundant Paths
- ORA-12518 TNS:监听程序无法分发客户机连接 解决办法
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。...
- webService 远程访问不了的问题
- centos6.4安装java,CentOS6.4下YUM安装MySQL和JDK和Tomcat
- python里dir是什么意思_python中dir什么作用