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

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

代码语言：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: -20.........完整代码请登录后点击上方下载按钮下载查看