微信小程序运用css实现摩天轮样式

效果样式及视频

摩天轮样式视频

1.wxml页面

<view class="new-member-gift">
    <!--摩天轮-->
    <view class="motel-box">
        <view class="motel-line1"></view>
        <view class="motel-line2"></view>
        <view class="motel-item motel-item01"></view>
        <view class="motel-item motel-item02"></view>
        <view class="motel-item motel-item03"></view>
        <view class="motel-item motel-item04"></view>
    </view>
</view>

2.wxss页面

.motel-box {
    position: relative;
    align-items: center;
    width: 500rpx;
    height: 500rpx;
    margin: 100rpx auto;
    border-radius: 500rpx;
    border: 2rpx solid #555;
    background: #eee;
    animation: xuanzuan 10s linear infinite;
}
.motel-line1 {
    width: 500rpx;
    height: 4rpx;
    background: #555;
    position: absolute;
    top: 50%;

}
.motel-line2 {
    width: 500rpx;
    height: 4rpx;
    background: #555;
    transform: rotate(90deg);
    position: absolute;
    top: 50%;

}
.motel-item {
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    background: red;
}
.motel-item01 {
    top: -50rpx;
    left: 50%;
    margin-left: -50rpx;

    animation: xuanzuan 10s linear infinite reverse;
}
.motel-item02 {
    bottom: -50rpx;
    left: 50%;
    background: greenyellow;
    margin-left: -50rpx;
    animation: xuanzuan 10s linear infinite reverse;
}
.motel-item03 {
    top: 50%;
    right: -50rpx;
    background: rgb(10, 24, 221);
    margin-top: -50rpx;
    animation: xuanzuan 10s linear infinite reverse;

}
.motel-item04 {
    top: 50%;
    left:  -50rpx;
    background: rgb(146, 9, 226);
    margin-top: -50rpx;
    animation: xuanzuan 10s linear infinite reverse;

}
@keyframes xuanzuan {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

可以根据自己需求，将圈换成轮子图片等！