html+css 简易摩天轮效果

vue dom

<div class="ferris_wheel">
    <div class="wheelBg"></div>
    <div class="wheelBox">
        <div class="bg"></div>
        <ul class="list">
            <li class="item" v-for="(item,i) in 5" :data-i="i"
                :style="{transform:' rotateZ('+ 360/5*i +'deg) ' }">
                <div class="cabin" :style="{transform:' rotateZ(-'+ 360/5*i +'deg) ' }">
                    <div class="cont">
                       <!--  -->
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

展示 html

<div class="ferris_wheel">
    <div class="wheelBg"></div>
    <div class="wheelBox">
        <div class="bg"></div>
        <ul class="list">
            <li data-i="0" class="item" style="transform: rotateZ(0deg);">
                <div class="cabin" style="transform: rotateZ(0deg);">
                    <div class="cont"></div>
                </div>
            </li>
            <li data-i="1" class="item" style="transform: rotateZ(72deg);">
                <div class="cabin" style="transform: rotateZ(-72deg);">
                    <div class="cont"></div>
                </div>
            </li>
            <li data-i="2" class="item" style="transform: rotateZ(144deg);">
                <div class="cabin" style="transform: rotateZ(-144deg);">
                    <div class="cont"></div>
                </div>
            </li>
            <li data-i="3" class="item" style="transform: rotateZ(216deg);">
                <div class="cabin" style="transform: rotateZ(-216deg);">
                    <div class="cont"></div>
                </div>
            </li>
            <li data-i="4" class="item" style="transform: rotateZ(288deg);">
                <div class="cabin" style="transform: rotateZ(-288deg);">
                    <div class="cont"></div>
                </div>
            </li>
        </ul>
    </div>
</div>

css

/* ferris_wheel s */
.ferris_wheel {
    width: 7rem;
    height: 7rem;
    background: #0000007a;
    position: absolute;
    left: .25rem;
    top: 0;
    direction: ltr;
}

.ferris_wheel .wheelBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.ferris_wheel .wheelBox {
    width: 6rem;
    height: 6rem;
    position: absolute;
    left: .25rem;
    top: .25rem;
    animation: wheel_frame 10s linear forwards infinite;
    border-radius: 50%;
    transform-origin: center center;
    background: linear-gradient(92deg, #1438be, #dcab3c);
}

.wheelBox .list {
    width: 6rem;
    height: 6rem;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #fff;
    border-radius: 50%;
}

.wheelBox .item {
    width: 50%;
    height: 1rem;
    background: #fdf5e68a;
    transform-origin: center right;
    position: absolute;
    left: 0;
    top: calc(50% - .5rem);
}

.wheelBox .item .cabin {
    width: 1rem;
    height: 1rem;
    background: linear-gradient(90deg, #ad5757, #35b14a);
    position: relative;
}

.wheelBox .item .cont {
    width: 1rem;
    height: 1rem;
    background: linear-gradient(90deg, black, white);
    position: relative;
    animation: wheel_cabin 10s linear forwards infinite;
}

@keyframes wheel_frame {
    0% {
        transform: rotateZ(0);
    }

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

@keyframes wheel_cabin {
    0% {
        transform: rotateZ(360deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

/* ferris_wheel e */