目录
一、竖屏基于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);}
