CSS星球

下载代码

html

css

分享到微信朋友圈

html

css

body{background-color: #1F1F1F;overflow: hidden}
.wrapper {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 60em;
  flex-direction: column;
  background-color: #131417;
  overflow: hidden;
}
.wrapper .title {
  font-size: 3rem;
  margin-bottom: 6rem;
  color: #DDD;
}
.wrapper .sphere {
  width: 45vmin;
  height: 45vmin;
  position: relative;
  animation: rotation 60s infinite linear;
  transform-style: preserve-3d;
}
.wrapper .sphere .section {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #333;
  transform-style: preserve-3d;
}
.wrapper .sphere .section:nth-child(1) {
  border-color: #5500ff;
  box-shadow: inset 0 0 5vmin 0px #5500ff, 0 0 90px -30px #5500ff;
  transform: rotateY(9deg);
  animation: fullRot1 10s linear infinite;
}
@keyframes fullRot1 {
  from {
    transform: rotateY(12deg);
  }
  to {
    transform: rotateY(372deg);
  }
}
.wrapper .sphere .section:nth-child(2) {
  border-color: #aa00ff;
  box-shadow: inset 0 0 5vmin 0px #aa00ff, 0 0 90px -30px #aa00ff;
  transform: rotateY(18deg);
  animation: fullRot2 10s linear infinite;
}
@keyframes fullRot2 {
  from {
    transform: rotateY(24deg);
  }
  to {
    transform: rotateY(384deg);
  }
}
.wrapper .sphere .section:nth-child(3) {
  border-color: magenta;
  box-shadow: inset 0 0 5vmin 0px magenta, 0 0 90px -30px magenta;
  transform: rotateY(27deg);
  animation: fullRot3 10s linear infinite;
}
@keyframes fullRot3 {
  from {
    transform: rotateY(36deg);
  }
  to {
    transform: rotateY(396deg);
  }
}
.wrapper .sphere .section:nth-child(4) {
  border-color: #ff00aa;
  box-shadow: inset 0 0 5vmin 0px #ff00aa, 0 0 90px -30px #ff00aa;
  transform: rotateY(36deg);
  animation: fullRot4 10s linear infinite;
}
@keyframes fullRot4 {
  from {
    transform: rotateY(48deg);
  }
  to {
    transform: rotateY(408deg);
  }
}
.wrapper .sphere .section:nth-child(5) {
  border-color: #ff0055;
  box-shadow: inset 0 0 5vmin 0px #ff0055, 0 0 90px -30px #ff0055;
  transform: rotateY(45deg);
  animation: fullRot5 10s linear infinite;
}
@keyframes fullRot5 {
  from {
    transform: rotateY(60deg);
  }
  to {
    transform: rotateY(420deg);
  }
}
.wrapper .sphere .section:nth-child(6) {
  border-color: red;
  box-shadow: inset 0 0 5vmin 0px red, 0 0 90px -30px red;
  transform: rotateY(54deg);
  animation: fullRot6 10s linear infinite;
}
@keyframes fullRot6 {
  from {
    transform: rotateY(72deg);
  }
  to {
    transform: rotateY(432deg);
  }
}
.wrapper .sphere .section:nth-child(7) {
  border-color: #ff5500;
  box-shadow: inset 0 0 5vmin 0px #ff5500, 0 0 90px -30px #ff5500;
  transform: rotateY(63deg);
  animation: fullRot7 10s linear infinite;
}
@keyframes fullRot7 {
  from {
    transform: rotateY(84deg);
  }
  to {
    transform: rotateY(444deg);
  }
}
.wrapper .sphere .section:nth-child(8) {
  border-color: #ffaa00;
  box-shadow: inset 0 0 5vmin 0px #ffaa00, 0 0 90px -30px #ffaa00;
  transform: rotateY(72deg);
  animation: fullRot8 10s linear infinite;
}
@keyframes fullRot8 {
  from {
    transform: rotateY(96deg);
  }
  to {
    transform: rotateY(456deg);
  }
}
.wrapper .sphere .section:nth-child(9) {
  border-color: yellow;
  box-shadow: inset 0 0 5vmin 0px yellow, 0 0 90px -30px yellow;
  transform: rotateY(81deg);
  animation: fullRot9 10s linear infinite;
}
@keyframes fullRot9 {
  from {
    transform: rotateY(108deg);
  }
  to {
    transform: rotateY(468deg);
  }
}
.wrapper .sphere .section:nth-child(10) {
  border-color: #aaff00;
  box-shadow: inset 0 0 5vmin 0px #aaff00, 0 0 90px -30px #aaff00;
  transform: rotateY(90deg);
  animation: fullRot10 10s linear infinite;
}
@keyframes fullRot10 {
  from {
    transform: rotateY(120deg);
  }
  to {
    transform: rotateY(480deg);
  }
}
.wrapper .sphere .section:nth-child(11) {
  border-color: #55ff00;
  box-shadow: inset 0 0 5vmin 0px #55ff00, 0 0 90px -30px #55ff00;
  transform: rotateY(99deg);
  animation: fullRot11 10s linear infinite;
}
@keyframes fullRot11 {
  from {
    transform: rotateY(132deg);
  }
  to {
    transform: rotateY(492deg);
  }
}
.wrapper .sphere .section:nth-child(12) {
  border-color: lime;
  box-shadow: inset 0 0 5vmin 0px lime, 0 0 90px -30px lime;
  transform: rotateY(108deg);
  animation: fullRot12 10s linear infinite;
}
@keyframes fullRot12 {
  from {
    transform: rotateY(144deg);
  }
  to {
    transform: rotateY(504deg);
  }
}
.wrapper .sphere .section:nth-child(13) {
  border-color: #00ff55;
  box-shadow: inset 0 0 5vmin 0px #00ff55, 0 0 90px -30px #00ff55;
  transform: rotateY(117deg);
  animation: fullRot13 10s linear infinite;
}
@keyframes fullRot13 {
  from {
    transform: rotateY(156deg);
  }
  to {
    transform: rotateY(516deg);
  }
}
.wrapper .sphere .section:nth-child(14) {
  border-color: #00ffaa;
  box-shadow: inset 0 0 5vmin 0px #00ffaa, 0 0 90px -30px #00ffaa;
  transform: rotateY(126deg);
  animation: fullRot14 10s linear infinite;
}
@keyframes fullRot14 {
  from {
    transform: rotateY(168deg);
  }
  to {
    transform: rotateY(528deg);
  }
}
.wrapper .sphere .section:nth-child(15) {
  border-color: cyan;
  box-shadow: inset 0 0 5vmin 0px cyan, 0 0 90px -30px cyan;
  transform: rotateY(135deg);
  animation: fullRot15 10s linear infinite;
}
@keyframes fullRot15 {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(540deg);
  }
}
.wrapper .sphere .section:nth-child(16) {
  border-color: #00aaff;
  box-shadow: inset 0 0 5vmin 0px #00aaff, 0 0 90px -30px #00aaff;
  transform: rotateY(144deg);
  animation: fullRot16 10s linear infinite;
  animation: none;
  transform: scale(1.6);
  opacity: 0;
  box-shadow: inset 0 0 5vmin 0px #00aaff, 0 0 90px -30px #00aaff;
}
@keyframes fullRot16 {
  from {
    transform: rotateY(192deg);
  }
  to {
    transform: rotateY(552deg);
  }
}
.wrapper .sphere .section:nth-child(17) {
  border-color: #0055ff;
  box-shadow: inset 0 0 5vmin 0px #0055ff, 0 0 90px -30px #0055ff;
  transform: rotateY(153deg);
  animation: fullRot17 10s linear infinite;
  animation: none;
  transform: scale(1.7);
  opacity: 0;
  box-shadow: inset 0 0 5vmin 0px #0055ff, 0 0 90px -30px #0055ff;
  opacity: 1;
  transform: scale(1.7);
  box-shadow: inset 0 0 5vmin 0px #0055ff, 0 0 90px -30px #0055ff;
}
@keyframes fullRot17 {
  from {
    transform: rotateY(204deg);
  }
  to {
    transform: rotateY(564deg);
  }
}
.wrapper .sphere .section:nth-child(18) {
  border-color: blue;
  box-shadow: inset 0 0 5vmin 0px blue, 0 0 90px -30px blue;
  transform: rotateY(162deg);
  animation: fullRot18 10s linear infinite;
  animation: none;
  transform: scale(1.8);
  opacity: 0;
  box-shadow: inset 0 0 5vmin 0px blue, 0 0 90px -30px blue;
  opacity: 1;
  transform: scale(1.8);
  box-shadow: inset 0 0 5vmin 0px blue, 0 0 90px -30px blue;
}
@keyframes fullRot18 {
  from {
    transform: rotateY(216deg);
  }
  to {
    transform: rotateY(576deg);
  }
}
.wrapper .sphere .section:nth-child(19) {
  border-color: #5500ff;
  box-shadow: inset 0 0 5vmin 0px #5500ff, 0 0 90px -30px #5500ff;
  transform: rotateY(171deg);
  animation: fullRot19 10s linear infinite;
  animation: none;
  transform: scale(1.9);
  opacity: 0;
  box-shadow: inset 0 0 5vmin 0px #5500ff, 0 0 90px -30px #5500ff;
  opacity: 1;
  transform: scale(1.9);
  box-shadow: inset 0 0 5vmin 0px #5500ff, 0 0 90px -30px #5500ff;
}
@keyframes fullRot19 {
  from {
    transform: rotateY(228deg);
  }
  to {
    transform: rotateY(588deg);
  }
}
.wrapper .sphere .section:nth-child(20) {
  border-color: #aa00ff;
  box-shadow: inset 0 0 5vmin 0px #aa00ff, 0 0 90px -30px #aa00ff;
  transform: rotateY(180deg);
  animation: fullRot20 10s linear infinite;
  animation: none;
  transform: scale(2);
  opacity: 0;
  box-shadow: inset 0 0 5vmin 0px #aa00ff, 0 0 90px -30px #aa00ff;
  opacity: 1;
  transform: scale(2);
  box-shadow: inset 0 0 5vmin 0px #aa00ff, 0 0 90px -30px #aa00ff;
}
@keyframes fullRot20 {
  from {
    transform: rotateY(240deg);
  }
  to {
    transform: rotateY(600deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg) rotateX(90deg);
  }
  50% {
    transform: rotateY(1080deg) rotateX(120deg);
  }
  100% {
    transform: rotateY(2160deg) rotateX(90deg);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg