摘要： 在实际开发中，当因为网站流量多。需要一些懒加载数据来提高用户体验性的话，做一些loa... 在实际开发中，当因为网站流量多。需要一些懒加载数据来提高用户体验性的话，做一些loading动画特效是必须的。不但简洁大方，还能明亮心情。哈哈，特别好.
以下是实际代码
index.wxml
<view wx:if="{{true}}" class="loading-contain">
<view class="point-list"></view>
<view class="point-list"></view>
<view class="point-list"></view>
</view>
index.wxss
/*加载动画*/
.loading-contain {
height: 56rpx;
text-align: center;
}
.loading-contain .point-list{
margin: 0 10rpx;
height: 30rpx;
width: 30rpx;
border-radius: 50%;
display: inline-block;
transform: scale(0);
animation: bulge 2s infinite ease-in-out;
}
.loading-contain .point-list::after {
position: absolute;
display: inline-block;
content: '';
height: 100%;
width: 100%;
border-radius: 50%;
background-color: inherit;
top: 0;
left: 0;
z-index: -1;
transform: scale(1);
animation: blow 2s infinite ease-in-out;
}
.loading-contain .point-list:nth-child(1) {
background-color: #ff8f95;
animation-delay: 0s;
}
.loading-contain .point-list:nth-child(2) {
background-color: #f4b568;
animation-delay: .25s;
}
.loading-contain .point-list:nth-child(3) {
background-color: #a2ddff;
animation-delay: .50s;
}
@keyframes bulge {
50% {
transform: scale(1);
}
}
