CSS实现微信小程序半圆无线滚动（过渡动画）

.wxss

.wxml

.holder{width: 100%;float: left;height: 60rpx;text-align: center;position: relative;margin-top: 100rpx;
}
.preloader {position: absolute;width: 60rpx;height: 0%;padding-bottom: 60rpx;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);
}
.preloader view {position: absolute;width: 100%;height: 100%;left: 50%;transform: translateX(-50%) translateY(-50%);overflow: hidden;animation: animatePreloader 0.7s infinite linear;transform-origin: 50% 100%;
}
.preloader view:before {content: "";position: absolute;width: 100%;height: 100%;left: 50%;top: 50%;transform: translateX(-50%);border: 1px solid #FF0505;border-radius: 50%;box-sizing: border-box;
}
&＃64;keyframes animatePreloader {0% {transform: translateX(-50%) translateY(-50%) rotateZ(0deg);}100% {transform: translateX(-50%) translateY(-50%) rotateZ(360deg);}
}


对你有帮助的话记得收藏点赞&＃xff0c;有什么问题欢迎评论留言。