<template>
|
<view class="animations">
|
<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>
|
</template>
|
|
<script>
|
export default {
|
name: "loading-love",
|
data() {
|
return {};
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-flow: row nowrap;
|
height: 160rpx;
|
}
|
|
.item {
|
background: linear-gradient(to bottom, #f00000, #e73827);
|
width: 16rpx;
|
height: 16rpx;
|
border-radius: 20rpx;
|
margin-right: 10rpx;
|
}
|
|
.item:nth-child(1) {
|
animation: love1 4s infinite;
|
}
|
|
.item:nth-child(2) {
|
animation: love2 4s infinite;
|
animation-delay: 0.15s;
|
}
|
|
.item:nth-child(3) {
|
animation: love3 4s infinite;
|
animation-delay: 0.3s;
|
}
|
|
.item:nth-child(4) {
|
animation: love4 4s infinite;
|
animation-delay: 0.45s;
|
}
|
|
.item:nth-child(5) {
|
animation: love5 4s infinite;
|
animation-delay: 0.6s;
|
}
|
|
.item:nth-child(6) {
|
animation: love4 4s infinite;
|
animation-delay: 0.75s;
|
}
|
|
.item:nth-child(7) {
|
animation: love3 4s infinite;
|
animation-delay: 0.9s;
|
}
|
|
.item:nth-child(8) {
|
animation: love2 4s infinite;
|
animation-delay: 1.05s;
|
}
|
|
.item:nth-child(9) {
|
animation: love1 4s infinite;
|
animation-delay: 1.2s;
|
}
|
|
@keyframes love1 {
|
30%,
|
50% {
|
height: 50rpx;
|
transform: translateY(-20rpx);
|
}
|
|
75%,
|
100% {
|
height: 20rpx;
|
transform: translateY(0);
|
}
|
}
|
|
@keyframes love2 {
|
30%,
|
50% {
|
height: 90rpx;
|
transform: translateY(-25rpx);
|
}
|
|
75%,
|
100% {
|
height: 20rpx;
|
transform: translateY(0);
|
}
|
}
|
|
@keyframes love3 {
|
30%,
|
50% {
|
height: 120rpx;
|
transform: translateY(-20rpx);
|
}
|
|
75%,
|
100% {
|
height: 20rpx;
|
transform: translateY(0);
|
}
|
}
|
|
@keyframes love4 {
|
30%,
|
50% {
|
height: 130rpx;
|
transform: translateY(-10rpx);
|
}
|
|
75%,
|
100% {
|
height: 20rpx;
|
transform: translateY(0);
|
}
|
}
|
|
@keyframes love5 {
|
30%,
|
50% {
|
height: 130rpx;
|
transform: translateY(10rpx);
|
}
|
|
75%,
|
100% {
|
height: 20rpx;
|
transform: translateY(0);
|
}
|
}
|
|
// .item:nth-child(1) {
|
// height: 50rpx;
|
// transform: translateY(-20rpx);
|
// }
|
|
// .item:nth-child(2) {
|
// height: 90rpx;
|
// transform: translateY(-25rpx);
|
// }
|
|
// .item:nth-child(3) {
|
// height: 120rpx;
|
// transform: translateY(-20rpx);
|
// }
|
|
// .item:nth-child(4) {
|
// height: 130rpx;
|
// transform: translateY(-10rpx);
|
// }
|
|
// .item:nth-child(5) {
|
// height: 130rpx;
|
// transform: translateY(10rpx);
|
// }
|
|
// .item:nth-child(6) {
|
// height: 130rpx;
|
// transform: translateY(-10rpx);
|
// }
|
|
// .item:nth-child(7) {
|
// height: 120rpx;
|
// transform: translateY(-20rpx);
|
// }
|
|
// .item:nth-child(8) {
|
// height: 90rpx;
|
// transform: translateY(-25rpx);
|
// }
|
|
// .item:nth-child(9) {
|
// height: 50rpx;
|
// transform: translateY(-20rpx);
|
// }
|
</style>
|
