<!-- 加载中 --> <view class="Loading_box"> <view class="Loading_img_box"><image class="Loading_img" src="../../static/activity/roll@2x.png" mode=""></image></view> <view class="Loading_tisp_content">疯狂加载中...</view> </view>
css效果:
// 加载中
.Loading_box {
height: 100vh;
padding-top: 496rpx;
.Loading_img_box {
display: flex;
justify-content: center;
.Loading_img {
height: 140rpx;
width: 140rpx;
// transition: all linear 3s;
animation: rotateImg 3s infinite linear;
}
// 动画轨迹
@keyframes rotateImg {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
}
.Loading_tisp_content {
margin-top: 46rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
text-align: center;
}
}
复制直接用,注意css用的是<style lang="scss" scoped> 如果不是,自己拆解样式结构。