原创 

头像圆圈环绕CSS动画

分类:css3    570人阅读    庆少  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);
    }
}
点击广告,支持我们为你提供更好的服务

CSS鼠标停靠图标变大

环绕式按钮菜单

canvas生日快乐动画特效

百分比加载进度SVG线条动画

市政府和行政机构HTML5模板 - Towngov

技能培训在线学习平台网站模板 - Collab

原子模型CSS3动画

残障人士服务网站HTML模板 - Medixare

按钮的hover效果覆盖过渡

Tailwindcss高级管理后台模板框架 - T-Wind

three.js立体感粒子动画

立体空间感3d几何体破碎

SEO和数字营销机构HTML模板 - SEOMY

法律服务和律师事务所HTML5模板 - AttorCo

单页形式个人主页HTML模板 - Wedo

CSS 3D铅笔旋转效果

CSS DIV画的字母Q

创意代理和初创公司HTML模板 - Wan

React实现的电子商务管理后台模板 - Dashtar

功能齐全的ReactJs管理模板 - Adminto

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务