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

最新推荐文章于 2022-03-04 00:01:03 发布

海轰Pro

最新推荐文章于 2022-03-04 00:01:03 发布

阅读量3.5k

点赞数 6

分类专栏：微信小程序文章标签：微信小程序加载动画 Demo

本文链接：https://blog.csdn.net/weixin_44225182/article/details/114594468

版权

微信小程序专栏收录该内容

85 篇文章 73 订阅

订阅专栏

效果展示

在这里插入图片描述

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 () {
    
  }
})