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

效果展示

Demo代码

index.wxml

"he">"box">"item">"item">"item">"item">"item">"item">"item">"item">"item">



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;
}
&＃64;keyframes love1{30%,50%{height: 60px; transform: translateY(-30px);}75%,100%{height: 20px; transform: translateY(0);}
}
&＃64;keyframes love2{30%,50%{height: 125px; transform: translateY(-62.5px);}75%,100%{height: 20px; transform: translateY(0);}}
&＃64;keyframes love3{30%,50%{height: 160px; transform: translateY(-75px);}75%,100%{height: 20px; transform: translateY(0);}
}
&＃64;keyframes love4{30%,50%{height: 180px; transform: translateY(-60px);}75%,100%{height: 20px; transform: translateY(0);}
}
&＃64;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 () {}
})