微信小程序--七彩爱心加载动画

效果展示

Demo代码

index.wxml

<view id="he"><view class="box"><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view></view>
</view>

index.wxss

page{padding: 0;margin: 0;list-style: none;
}
#he{/* width: 100%; */display: flex;/*弹性盒模型*/justify-content: center;/*主轴方向居中显示*/align-items: center;/*交叉轴方向居中显示*/height: 100vh;background-color: #232e6d;
}
.box{height: 200px;
}
.item{float: left;width: 20px;height: 20px;border-radius: 20px;margin-right: 10px;
}
.item:nth-child(1){background-color: #f62e74;animation: love1 4s infinite;
}
.item:nth-child(2){background-color: #f45330;animation: love2 4s infinite;animation-delay: 0.15s;
}
.item:nth-child(3){background-color: #ffc883;animation: love3 4s infinite;animation-delay: 0.3s;
}
.item:nth-child(4){background-color: #30d268;animation: love4 4s infinite;animation-delay: 0.45s;
}
.item:nth-child(5){background-color: #006cb4;animation: love5 4s infinite;animation-delay: 0.6s;
}
.item:nth-child(6){background-color: #784697;animation: love4 4s infinite;animation-delay: 0.75s;
}
.item:nth-child(7){background-color: #ffc883;animation: love3 4s infinite;animation-delay: 0.9s;
}
.item:nth-child(8){background-color: #f45330;animation: love2 4s infinite;animation-delay: 1.05s;
}
.item:nth-child(9){background-color: #f62e74;animation: love1 4s infinite;animation-delay: 1.2s;
}
@keyframes love1{30%,50%{height: 60px; transform: translateY(-30px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love2{30%,50%{height: 125px; transform: translateY(-62.5px);}75%,100%{height: 20px; transform: translateY(0);}}
@keyframes love3{30%,50%{height: 160px; transform: translateY(-75px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love4{30%,50%{height: 180px; transform: translateY(-60px);}75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love5{30%,50%{height: 190px; transform: translateY(-45px);}75%,100%{height: 20px; transform: translateY(0);}
}

index.js

{"usingComponents": {}
}

index.json

Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

微信小程序--七彩爱心加载动画相关推荐

【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
【微信小程序】自定义加载动画
前言在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多. 通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代 ...
微信小程序自定义loading加载动画（2）
1.实现效果 2.实现原理 animation 3.实现代码 <view class="loading-row"><view class="loadin ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...
Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...

微信小程序--七彩爱心加载动画

效果展示

Demo代码

index.wxml

index.wxss

index.js

index.json

微信小程序--七彩爱心加载动画相关推荐

最新文章

热门文章