visual-design/theme-chalk/v-satellite.css

A Component Library for Vue 3

.satellite{width:200px;height:200px;margin:0;border-radius:50%;position:relative;perspective:1200px;perspective-origin:50% 50%}.satellite:before{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background:url(https://picdm.sunbangyan.cn/2023/10/03/xcym92.png) repeat-x;background-size:cover;border-radius:50%;animation:img-rotate 30s infinite linear;box-shadow:-80px -15px 80px 10px rgba(0,0,0,.2) inset,-10px 0 15px -7px rgba(240,223,23,.3490196078);z-index:2}@keyframes img-rotate{0%{background-position:0 0}100%{background-position:1200px 0}}.satellite,.satellite .circle-line{transform-style:preserve-3d;-webkit-transform-style:preserve-3d}.satellite .circle-line{border-radius:50%;position:absolute;border:3px solid #13c2c2;transform:rotateZ(60deg) rotateY(105deg);-webkit-transform:rotateZ(60deg) rotateY(105deg)}.satellite .circle-line::after,.satellite .circle-line::before{border-radius:50%;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}.satellite .one{width:120%;height:120%;left:0;top:0;margin-left:-10%;margin-top:-10%}.satellite .one::before{content:"";width:10px;height:10px;background:var(--vi-color-primary);filter:drop-shadow(10px 10px 10px var(--vi-color-primary));animation:move 20s linear infinite;transform:rotateZ(0) translateX(120px) rotateZ(0) rotateY(-105deg)}.satellite .one::after{content:"";width:10px;height:10px;background:var(--vi-color-success);filter:drop-shadow(10px 10px 10px var(--vi-color-success));animation:move4 20s linear infinite;transform:rotateZ(180deg) translateX(120px) rotateZ(-180deg) rotateY(-105deg)}@keyframes move{from{transform:rotateZ(0) translateX(120px) rotateZ(0) rotateY(-105deg)}to{transform:rotateZ(360deg) translateX(120px) rotateZ(-360deg) rotateY(-105deg)}}@keyframes move4{from{transform:rotateZ(-180deg) translateX(120px) rotateZ(180deg) rotateY(-105deg)}to{transform:rotateZ(180deg) translateX(120px) rotateZ(-180deg) rotateY(-105deg)}}.satellite .two{width:140%;height:140%;left:0;top:0;margin-left:-20%;margin-top:-20%}.satellite .two::before{content:"";width:10px;height:10px;background:var(--vi-color-warning);filter:drop-shadow(10px 10px 10px var(--vi-color-warning));animation:move-two-1 20s linear infinite;transform:rotateZ(0) translateX(150px) rotateZ(0) rotateY(-105deg)}.satellite .two::after{content:"";width:10px;height:10px;background:var(--vi-color-danger);filter:drop-shadow(10px 10px 10px var(--vi-color-danger));animation:move-two-2 20s linear infinite;transform:rotateZ(180deg) translateX(140px) rotateZ(-180deg) rotateY(-105deg)}@keyframes move-two-1{from{transform:rotateZ(0) translateX(140px) rotateZ(0) rotateY(-105deg)}to{transform:rotateZ(360deg) translateX(140px) rotateZ(-360deg) rotateY(-105deg)}}@keyframes move-two-2{from{transform:rotateZ(-180deg) translateX(140px) rotateZ(180deg) rotateY(-105deg)}to{transform:rotateZ(180deg) translateX(140px) rotateZ(-180deg) rotateY(-105deg)}}