css转盘旋转效果

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！ code.juejin.cn/pen/7146086…

本文写一个简单的css小demo记录一下转盘旋转的场景

本文使用vue3来进行编辑，为了熟悉vue3和参加掘金的码上掘金活动，这几天我会抽空多更新几个模块来进行写dome，写的时间比较有限，所以Ui也是尽量从简，功能还是比较完善的。文章的内容不多，欢迎大家阅读和批评指正。

今天实现一个转盘的环绕效果，功能的要求是大转盘上有多个小图案，大转盘需要能够进行旋转，带动着小图案一起旋转，并且在旋转的同时小图案的方向不能发生变化，也就是说大转盘在转，图案不能随着转盘一起发生旋转，在平面y轴上从头到尾保持一个竖直向下的一个方向，让我们来看看具体的实现效果吧，demo所使用到的css样式非常简单，不过需要一个特别清奇的思路来解决图案数值向下的问题。

.box{
        margin-top: 100px;
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 1px solid lightskyblue;
        background-color: lightskyblue;
    }  
    .item{
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1111%2F0R11Q22326%2F1PR1122326-6.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666416127&t=cce10f2f9474bc0c4b6bbb1cfeaf0065');
        background-size: 60px 60px;
    }
    .item:nth-child(1){
        top: 26px;
        left: 56px;
    }
    .item:nth-child(2){
        top: 24px;
        left: 176px;
    }
    .item:nth-child(3){
        top: 120px;
        left: 226px;
    }
    .item:nth-child(4){
        top: 204px;
        left: 176px;
    }
    .item:nth-child(5){
        top: 204px;
        right: 176px;
    }
    .item:nth-child(6){
        top: 120px;
        right: 226px;
    }

这是没有发生旋转时候的转盘，每个图案都保持了竖直向下的状态，接下来让大圆盘带动图案一起进行旋转，看看是什么效果

    .box{
         animation: rolate 3s infinite linear; 
    }   
    @keyframes rolate {
        to{
            transform: rotate(360deg);
        }
    }

添加旋转的功能，看看旋转后图片对应的效果，这个时候大转盘已经是开启了转动的，但由于小图案是存在大圆盘上方的，所以会跟着进行旋转，这并不是目前想要的效果

这个时候应该想一个办法来进行解决，决定将每个图案自身反向进行旋转，这样负负得正，小图案就不会有自身旋转的效果了，下面是具体实现的css，其实内容比较简单。

.item{
    animation: rolate1 3s infinite linear;
}
@keyframes rolate1 {
    to{
        transform: rotate(-360deg);
    }
}

这个是最后的实现效果。