前端css-轨迹星球动效

目录

一、竖屏基于css实现的动画效果、可添加星球数量、星球可跳转扩展逻辑、兼容横屏

二、动画效果图

三、部分源码css

---

一、竖屏基于css实现的动画效果、可添加星球数量、星球可跳转扩展逻辑、兼容横屏

二、动画效果图

三、部分源码css

.transform {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    /* Other transform properties here */
}



@-webkit-keyframes cir1 {
    0% {
        -webkit-transform: rotateY(0deg) rotateZ(10deg);
    }

    100% {
        -webkit-transform: rotateY(-360deg) rotateZ(10deg);
    }

}

@keyframes cir1 {
    0% {
        transform: rotateY(0deg) rotateZ(10deg);
    }

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

@-webkit-keyframes cir2 {
    0% {
        -webkit-transform: rotateY(-60deg) rotateZ(10deg);
    }

    100% {
        -webkit-transform: rotateY(-420deg) rotateZ(10deg);
    }
}

@keyframes cir2 {
    0% {
        transform: rotateY(-60deg) rotateZ(10deg);
    }

    100% {
        transform: rotateY(-420deg) rotateZ(10deg);
    }
}

@-webkit-keyframes cir3 {
    0% {
        -webkit-transform: rotateY(-120deg) rotateZ(10deg);
    }

    100% {
        -webkit-transform: rotateY(-480deg) rotateZ(10deg);
    }
}

@keyframes cir3 {
    0% {
        transform: rotateY(-120deg) rotateZ(10deg);
    }

    100% {
        transform: rotateY(-480deg) rotateZ(10deg);
    }
}

@-webkit-keyframes cir4 {
    0% {
        -webkit-transform: rotateY(-180deg) rotateZ(10deg);
    }

    100% {
        -webkit-transform: rotateY(-540deg) rotateZ(10deg);
    }
}

@keyframes cir4 {
    0% {
        transform: rotateY(-180deg) rotateZ(10deg);
    }

    100% {
        transform: rotateY(-540deg) rotateZ(10deg);
    }
}

@-webkit-keyframes cir5 {
    0% {
        -webkit-transform: rotateY(-240deg) rotateZ(10deg);
    }

    100% {
        -webkit-transform: rotateY(-600deg) rotateZ(10deg);
    }
}

@keyframes cir5 {
    0% {
        transform: rotateY(-240deg) rotateZ(10deg);
    }

    100% {
        transform: rotateY(-600deg) rotateZ(10deg);
    }
}

@-webkit-keyframes cir6 {
    0% {
        -webkit-transform: rotateY(-300deg) rotateZ(10deg);
    }

    100% {
        -webkit-transform: rotateY(-660deg) rotateZ(10deg);
    }
}

@keyframes cir6 {
    0% {
        transform: rotateY(-300deg) rotateZ(10deg);
    }

    100% {
        transform: rotateY(-660deg) rotateZ(10deg);
    }
}

@keyframes cir {
    0% {
        transform: rotateX(80deg) rotateY(-30deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(80deg) rotateY(-30deg) rotateZ(-360deg);
    }
}

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

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

@-webkit-keyframes cir {
    0% {
        -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);
    }
}

@-webkit-keyframes cir_p {
    0% {
        -webkit-transform: rotateZ(0deg);
    }

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

.u_p3d {
    width: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ui_base {
    position: relative;
    width: 100%;
    height: 0px;
    margin: 80px auto;
    -webkit-perspective: 1000px;
    -webkit-perspective-origin: 50% 0%;
    perspective: 1000px;
    perspective-origin: 50% 0%;
}

.base {
    -webkit-transform: rotateX(80deg) rotateY(-30deg);
    transform: rotateX(80deg) rotateY(-30deg);
    position: relative;
    width: 500px;
    height: 500px;
    animation: cir 10s linear 0s infinite;
}


.ball_base {
    -webkit-transform-origin: 225px 0px;
    transform-origin: 282px 0px;
    position: absolute;
    top: 253px;
    left: -26px;
    width: 70px;
    height: 127px;
    color: #222;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ball {
    -webkit-transition: all 2s ease-out 0ms;
    transition: all 2s ease-out 0ms;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    width: 90px;
    height: 90px;
    text-align: center;
    background-size: 100% 100%;
    left: 0px;
    top: 0px;
    color: rgba(255, 255, 255, 0);
    font-size: 12px;
    opacity: 1;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    p {
        color: #fff;
    }
}


.ball_c {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    width: 350px;
    height: 350px;
    line-height: 250px;
    text-align: center;
    left: 15%;
    top: 104px;
    color: #fff;
    font-size: 24px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    img {
        width: 100%;
        object-fit: cover;
    }
}


.pan {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid #ccc;
    border-radius: 50%;
    -webkit-animation: cir_p 5s linear 0s infinite;
    animation: cir_p 5s linear 0s infinite;
    // background: black;
}

.ball {
    color: #fff;
    opacity: 1;
    width: 100%;

    .ball-img {
        width: 100%;

        .slace-img {
            width: 110%;
            cursor: pointer;
            transition: all 0.6s;
        }

        .slace-img:hover {
            transform: scale(1.1);
        }

        img {
            width: 70%;
            object-fit: cover;
        }
    }


}



.ball_1 .ball {
    transform: rotateY(10deg) rotateZ(10deg);
    animation: cir1 10s linear 0s infinite;
    -webkit-transition-delay: 1100ms !important;
    transition-delay: 1100ms !important;

}

.ball_2 .ball {
    -webkit-animation: cir2 10s linear 0s infinite;
    animation: cir2 10s linear 0s infinite;
    -webkit-transition-delay: 900ms !important;
    transition-delay: 900ms !important;

}

.ball_3 .ball {
    -webkit-animation: cir3 10s linear 0s infinite;
    animation: cir3 10s linear 0s infinite;
    -webkit-transition-delay: 700ms !important;
    transition-delay: 700ms !important;

}

.ball_4 .ball {
    -webkit-animation: cir4 10s linear 0s infinite;
    animation: cir4 10s linear 0s infinite;
    -webkit-transition-delay: 500ms !important;
    transition-delay: 500ms !important;

}

.ball_5 .ball {
    -webkit-animation: cir5 10s linear 0s infinite;
    animation: cir5 10s linear 0s infinite;
    -webkit-transition-delay: 300ms !important;
    transition-delay: 300ms !important;

}

.ball_6 .ball {
    -webkit-animation: cir6 10s linear 0s infinite;
    animation: cir6 10s linear 0s infinite;
    -webkit-transition-delay: 100ms !important;
    transition-delay: 100ms !important;

}

.ball_1 {
    -webkit-transform: rotateX(-90deg) rotateY(48deg) translateY(-28px);
    transform: rotateX(-90deg) rotateY(48deg) translateY(-28px);
}

.ball_2 {
    -webkit-transform: rotateX(-90deg) rotateY(100deg) translateY(-29px);
    transform: rotateX(-90deg) rotateY(100deg) translateY(-29px);
}

.ball_3 {
    -webkit-transform: rotateX(-90deg) rotateY(158deg) translateY(-31px);
    transform: rotateX(-90deg) rotateY(158deg) translateY(-31px);
}

.ball_4 {
    -webkit-transform: rotateX(-90deg) rotateY(221deg) translateY(-30px);
    ;
    transform: rotateX(-90deg) rotateY(221deg) translateY(-30px);
}

.ball_5 {
    -webkit-transform: rotateX(-90deg) rotateY(277deg) translateY(-27px);
    transform: rotateX(-90deg) rotateY(277deg) translateY(-27px);
}

.ball_6 {
    -webkit-transform: rotateX(-90deg) rotateY(340deg) translateY(-30px);
    transform: rotateX(-90deg) rotateY(340deg) translateY(-30px);
}