vue 绕圆形旋转

效果图

tenplate

<div class="module_box">
            <div class="box">  
                <i><span></span></i>  
            </div>
            <div class="box2">
                <i><span></span></i>
            </div>
            <div class="box3">
                <i class="el-icon-video-play"></i>
            </div>
        </div>

css

.module_box{
    height: 400px;
    display: flex;
    
}
.box{  
        position: relative;  
        width: 300px;  
        height: 300px;  
        border: 5px solid #F5F5F5;  
        border-radius: 50%;
        margin-left: 300px;  
    }  
    .box i{  

        width: 300px;  
        height: 300px;  
        position: absolute;  

        /*旋转动画*/  
        animation:circleRoate 5s infinite linear ;   

    }  
    .box i span{  
        position: absolute;  
        left: 240px;  
        top: 25px;  
        width: 10px;  
        height: 10px;  
        border-radius: 50%;  
        background:#ff6200;  
    }
    
    .box2{
        margin-left: 50px;
        margin-top: 50px;
        width: 200px;
        height: 200px;
        border: 3px solid pink;
        border-radius: 50%;
        position: relative;
    }
    .box2 i{
        width: 200px;
        height: 200px;
        position: absolute;
        animation: circleRoate 3s infinite linear;
        border-radius: 50%;
    }
    .box2 i span{
        width: 8px;
        height: 8px;
        position: absolute;
        border-radius: 50%;
        left: 163px;
        top: 20px;
        background: rgb(139, 214, 233);
    }
    .box3{
        width: 300px;
        height: 300px;
        position: relative;
        text-align: center;
    }
    .box3 i{
        color: #1296DB;
        line-height: 300px;
        font-size: 30px !important;
        animation: circleRoate 2s infinite linear;
    }
    /* 必须要有 */
    @keyframes circleRoate{  
        from{transform: rotate(0deg);}  
        to{transform: rotate(360deg);}  
    }