div+css实现彩色圈圈组成文字数字三维旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现彩色圈圈组成文字数字三维旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-image: radial-gradient(circle at center, #000, #111);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  perspective: 30em;
  overflow: hidden;
}

.x2K {
  position: relative;
  transform-style: preserve-3d;
  -webkit-animation: tk 30s infinite ease-in-out;
          animation: tk 30s infinite ease-in-out;
}
@-webkit-keyframes tk {
  0%, 10% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
@keyframes tk {
  0%, 10% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

.two, .zero {
  position: absolute;
  transform-style: preserve-3d;
}
.two > div, .zero > div {
  position: absolute;
}
.two > div::after, .zero > div::after {
  position: absolute;
  transform: translateZ(-50%, -50%);
  font-size: 2em;
}
.two > div:nth-child(1), .zero > div:nth-child(1) {
  --and: 0s;
}
.two > div:nth-child(2), .zero > div:nth-child(2) {
  --and: -1s;
}
.two > div:nth-child(3), .zero > div:nth-child(3) {
  --and: -2s;
}
.two > div:nth-child(4), .zero > div:nth-child(4) {
  --and: -3s;
}
.two > div:nth-child(5), .zero > div:nth-child(5) {
  --and: -4s;
}
.two > div:nth-child(6), .zero > div:nth-child(6) {
  --and: -5s;
}
.two > div:nth-child(7), .zero > div:nth-child(7) {
  --and: -6s;
}
.two > div:nth-child(8), .zero > div:nth-child(8) {
  --and: -7s;
}
.two > div:nth-child(9), .zero > div:nth-child(9) {
  --and: -8s;
}
.two > div:nth-child(10), .zero > div:nth-child(10) {
  --and: -9s;
}
.two > div:nth-child(11), .zero > div:nth-child(11) {
  --and: -10s;
}
.two > div:nth-child(12), .zero > div:nth-child(12) {
  --and: -11s;
}
.two > div:nth-child(13), .zero > div:nth-child(13) {
  --and: -12s;
}
.two > div:nth-child(14), .zero > div:nth-child(14) {
  --and: -13s;
}
.two > div:nth-child(15), .zero > div:nth-child(15) {
  --and: -14s;
}
.two > div:nth-child(16), .zero > div:nth-child(16) {
  --and: -15s;
}
.two > div:nth-child(17), .zero > div:nth-child(17) {
  --and: -16s;
}
.two > div:nth-child(18), .zero > div:nth-child(18) {
  --and: -17s;
}
.two > div:nth-child(19), .zero > div:nth-child(19) {
  --and: -18s;
}
.two > div:nth-child(20), .zero > div:nth-child(20) {
  --and: -19s;
}
.two > div:nth-child(21), .zero > div:nth-child(21) {
  --and: -20s;
}
.two > div:nth-child(22), .zero > div:nth-child(22) {
  --and: -21s;
}
.two > div:nth-child(23), .zero > div:nth-child(23) {
  --and: -22s;
}
.two > div:nth-child(24), .zero > div:nth-child(24) {
  --and: -23s;
}
.two > div:nth-child(25), .zero > div:nth-child(25) {
  --and: -24s;
}
.two > div:nth-child(26), .zero > div:nth-child(26) {
  --and: -25s;
}
.two > div:nth-child(27), .zero > div:nth-child(27) {
  --and: -26s;
}
.two > div:nth-child(28), .zero > div:nth-child(28) {
  --and: -27s;
}
.two > div:nth-child(29), .zero > div:nth-child(29) {
  --and: -28s;
}
.two > div:nth-child(30), .zero > div:nth-child(30) {
  --and: -29s;
}
.two > div:nth-child(31), .zero > div:nth-child(31) {
  --and: -30s;
}
.two > div:nth-child(32), .zero > div:nth-child(32) {
  --and: -31s;
}
.two > div:nth-child(33), .zero > div:nth-child(33) {
  --and: -32s;
}
.two > div:nth-child(34), .zero > div:nth-child(34) {
  --and: -33s;
}
.two > div:nth-child(35), .zero > div:nth-child(35) {
  --and: -34s;
}
.two > div:nth-child(36), .zero > div:nth-child(36) {
  --and: -35s;
}
.two > div:nth-child(37), .zero > div:nth-child(37) {
  --and: -36s;
}
.two > div:nth-child(38), .zero > div:nth-child(38) {
  --and: -37s;
}
.two > div:nth-child(39), .zero > div:nth-child(39) {
  --and: -38s;
}
.two > div:nth-child(40), .zero > div:nth-child(40) {
  --and: -39s;
}
.two > div:nth-child(41), .zero > div:nth-child(41) {
  --and: -40s;
}
.two > div:nth-child(42), .zero > div:nth-child(42) {
  --and: -41s;
}
.two > div:nth-child(43), .zero > div:nth-child(43) {
  --and: -42s;
}
.two > div:nth-child(44), .zero > div:nth-child(44) {
  --and: -43s;
}
.two > div:nth-child(45), .zero > div:nth-child(45) {
  --and: -44s;
}
.two > div:nth-child(46), .zero > div:nth-child(46) {
  --and: -45s;
}
.two > div:nth-child(47), .zero > div:nth-child(47) {
  --and: -46s;
}
.two > div:nth-child(48), .zero > div:nth-child(48) {
  --and: -47s;
}
.two > div:nth-child(49), .zero > div:nth-child(49) {
  --and: -48s;
}
.two > div:nth-child(50), .zero > div:nth-child(50) {
  --and: -49s;
}
.two > div:nth-child(51), .zero > div:nth-child(51) {
  --and: -50s;
}
.two > div:nth-child(52), .zero > div:nth-child(52) {
  --and: -51s;
}
.two > div:nth-child(53), .zero > div:nth-child(53) {
  --and: -52s;
}
.two > div:nth-child(54), .zero > div:nth-child(54) {
  --and: -53s;
}
.two > div:nth-child(55), .zero > div:nth-child(55) {
  --and: -54s;
}
.two > div:nth-child(56), .zero > div:nth-child(56) {
  --and: -55s;
}
.two > div:nth-child(57), .zero > div:nth-child(57) {
  --and: -56s;
}
.two > div:nth-child(58), .zero > div:nth-child(58) {
  --and: -57s;
}
.two > div:nth-child(59), .zero > div:nth-child(59) {
  --and: -58s;
}
.two > div:nth-child(60), .zero > div:nth-child(60) {
  --and: -59s;
}

.two {
  left: -15em;
}
.two > div {
  -webkit-animation: twoTranform 60s infinite linear, twoLeft 60s infinite ease-in-out, twoTop 60s infinite ease-in-out, twoColor 30s infinite linear;
          animation: twoTranform 60s infinite linear, twoLeft 60s infinite ease-in-out, twoTop 60s infinite ease-in-out, twoColor 30s infinite linear;
  -webkit-animation-delay: var(--and, 0s);
          animation-delay: var(--and, 0s);
}
.two > div::after {
  content: "2";
}
@-webkit-keyframes twoTranform {
  0% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(1em) scale(0);
  }
  1% {
    transform: rotateZ(0deg) rotateY(40deg) translateZ(1em) scale(1);
  }
  30% {
    transform: rotateZ(180deg) rotateY(1200deg) translateZ(1em) scale(1);
  }
  50% {
    transform: rotateZ(225deg) rotateY(2000deg) translateZ(1em) scale(1);
  }
  75% {
    transform: rotateZ(180deg) rotateY(3000deg) translateZ(1em) scale(1);
  }
  80% {
    transform: rotateZ(90deg) rotateY(3200deg) translateZ(1em) scale(1);
  }
  99% {
    transform: rotateZ(90deg) rotateY(3960deg) translateZ(1em) scale(1);
  }
  100% {
    transform: rotateZ(90deg) rotateY(4000deg) translateZ(1em) scale(0);
  }
}
@keyframes twoTranform {
  0% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(1em) scale(0);
  }
  1% {
    transform: rotateZ(0deg) rotateY(40deg) translateZ(1em) scale(1);
  }
  30% {
    transform: rotateZ(180deg) rotateY(1200deg) translateZ(1em) scale(1);
  }
  50% {
    transform: rotateZ(225deg) rotateY(2000deg) translateZ(1em) scale(1);
  }
  75% {
    transform: rotateZ(180deg) rotateY(3000deg) translateZ(1em) scale(1);
  }
  80% {
    transform: rotateZ(90deg) rotateY(3200deg) translateZ(1em) scale(1);
  }
  99% {
    transform: rotateZ(90deg) rotateY(3960deg) translateZ(1em) scale(1);
  }
  100% {
    transform: rotateZ(90deg) rotateY(4000deg) translateZ(1em) scale(0);
  }
}
@-webkit-keyframes twoTop {
  0%, 30% {
    top: -3.5em;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  15% {
    top: -6.5em;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  75% {
    top: 5em;
  }
  80%, 100% {
    top: 5.5em;
  }
}
@keyframes twoTop {
  0%, 30% {
    top: -3.5em;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  15% {
    top: -6.5em;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  75% {
    top: 5em;
  }
  80%, 100% {
    top: 5.5em;
  }
}
@-webkit-keyframes twoLeft {
  0%, 75% {
.........完整代码请登录后点击上方下载按钮下载查看