原创 头像圆圈环绕CSS动画
分类:css3 141人阅读庆少 2022-10-25 17:12

 <div class="sj-cont  flex_ac_ai">
            <div class="sj-cont-item flex_ac_ai">
                <div class="sj-cont-item1 flex_ac_ai relative">
                    <div class="sj-cimg1">
                        <img class="img0" src="../assets/img/1.png" alt="">
                    </div>
                    <div class="sj-cimg ">
                        <img class="img0 absolute" src="../assets/img/1.png" alt="">
                        <img class="img1 absolute" src="../assets/img/2.png" alt="">
                        <img class="img2 absolute" src="../assets/img/3.png" alt="">
                        <img class="img3 absolute" src="../assets/img/3.png" alt="">
                    </div>
                </div>
            </div>
        </div>
.sj-cont {
    min-width: 100vw;
    min-height: calc(100vh - 79px);
    background: url(../assets/img/sj.png);
    background-size: cover;

    .sj-cont-item {
        width: 842px;
        height: 842px;
        border: 1px solid #023341;
        border-radius: 50%;

        .sj-cont-item1 {
            width: 479px;
            height: 479px;
            border: 1px solid #023341;
            border-radius: 50%;
        }

        .sj-cimg {
            width: 100%;
            height: 100%;
            border-radius: 100%;
            position: absolute;
            transform-origin: center center;
            animation: circle 100s linear infinite;
        }

        .sj-cimg-img {
            top: -50px;
            right: 180px;
            width: 118px;
            height: 118px;
            border-radius: 50%;
            background: url(../assets/img/bgtx.png);
            background-size: cover;
            padding: 10px;
        }

    }
}

.img0 {
    bottom: 0px;
    left:30px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: url(../assets/img/bgtx.png);
    background-size: cover;
    padding: 10px;
}

.img1 {
    top: -50px;
    right: 180px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: url(../assets/img/bgtx.png);
    background-size: cover;
    padding: 10px;
}
.img2 {
    bottom: 120px;
    right: -50px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: url(../assets/img/bgtx.png);
    background-size: cover;
    padding: 10px;
}

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

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