效果图
<>强实现思路
1。首先通过HTML + CSS实现加载动画的静态效果;
2。根据需求给每个动画设计不同的动画效果。
例如第一个加载图标的静态绘制
1,首先确定动画的盒子宽高;
2,设置盒子中每一个长方形的宽高以及定位(注意:此处需要将长方形的旋转中心点移动到长方形的右侧边终点,方便后期以该点旋转),
3,通过长方形盒子的伪元素,设置显示的长方形背景和宽高,同时进行定位。
4,由于在第二步的时候,已经将旋转中心移动,此处我们直接对每一个盒子中长方形进行旋转(注意:旋转角度=360/盒子中长方形个数)。
.circle-line {
宽度:100 px;
身高:100 px;
显示:inline-block;
位置:相对;
}
{.circle-line文本
显示:块;
宽度:50%;
身高:5 px;
透明度:7;
位置:绝对的;
上图:钙(50% - 2.5 px);
左:0 px;
transform-origin:中心吧;
}
{前.circle-line文本:
内容:”;
显示:块;
宽度:15 px;
身高:5 px;
位置:绝对的;
上图:0;
右:10 px;
背景颜色:蓝色;
}
.circle-line文本:nth-child (1) {
变换:旋转(0度);
}
.circle-line文本:nth-child (2) {
变换:旋转(45度);
}
.circle-line文本:nth-child (3) {
变换:旋转(90度);
}
.circle-line文本:nth-child (4) {
变换:旋转(135度);
}
.circle-line文本:nth-child (5) {
变换:旋转(180度);
}
.circle-line文本:nth-child (6) {
变换:旋转(225度);
}
.circle-line文本:nth-child (7) {
变换:旋转(270度);
}
.circle-line文本:nth-child (8) {
变换:旋转(315度);
}
动画制作
观察发现动画只是针对每个长方形的透明度进行改变,所以动画采用从0.05到0.9的透明度循环改变。
@keyframes圆{
0% {
透明度:0.05;
}
100% {
透明度:0.9;
}
}
进行动画绑定
{.circle-line文本
动画:圆1.5年代线性无限;
}
动画绑定完成,发现所有的整个图标一起显示消失,那么也就是缺少了对单个个体的动画处理,延迟动画时间,使其依次渐变。
单个动画处理
.circle-line文本:nth-child (1) {
animation-delay: 0.2秒;
}
.circle-line文本:nth-child (2) {
animation-delay: 0.4秒;
}
.circle-line文本:nth-child (3) {
animation-delay: 0.6秒;
}
.circle-line文本:nth-child (4) {
animation-delay: 0.8秒;
}
.circle-line文本:nth-child (5) {
animation-delay: 1;
}
.circle-line文本:nth-child (6) {
animation-delay: 1.2秒;
}
.circle-line文本:nth-child (7) {
animation-delay: 1.4秒;
}
.circle-line文本:nth-child (8) {
animation-delay: 1.6秒;
}
注意:单个动画延迟的时间必须超过动画执行的总时间,防止一个动画执行完成后的卡顿。
以上所述是小编给大家介绍的微信小程序实现自定义加载图标功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
