CSS 實現微信小程序半圓無線滾動（過渡動畫）

效果圖如下所示

.wxss

<view class="holder">
  <view class="preloader">
     <view></view>
  </view>
</view>

.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;
}
@keyframes animatePreloader {
    0% {
        transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
    }
}

對你有幫助的話記得收藏點贊，有什麼問題歡迎評論留言。