纯css实现圆点围绕直线螺旋旋转效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纯css实现圆点围绕直线螺旋旋转效果代码

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

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">



    <style>
html, body {
  height: 100%;
  transform-style: preserve-3d;
}

.line {
  width: 100%;
  height: 40px;
  background: #333;
  margin-bottom: -40px;
  position: absolute;
  top: 50%;
}

.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: red;
  position: absolute;
  z-index: 2;
  top: 50%;
  transform-origin: center center -70px;
}

.circle:nth-child(1) {
  animation: rotate1 2s -0.2s infinite;
  transform: translateX(0px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate1 {
  100% {
    transform: translateX(0px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(2) {
  animation: rotate2 2s -0.4s infinite;
  transform: translateX(50px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate2 {
  100% {
    transform: translateX(50px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(3) {
  animation: rotate3 2s -0.6s infinite;
  transform: translateX(100px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate3 {
  100% {
    transform: translateX(100px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(4) {
  animation: rotate4 2s -0.8s infinite;
  transform: translateX(150px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate4 {
  100% {
    transform: translateX(150px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(5) {
  animation: rotate5 2s -1s infinite;
  transform: translateX(200px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate5 {
  100% {
    transform: translateX(200px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(6) {
  animation: rotate6 2s -1.2s infinite;
  transform: translateX(250px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate6 {
  100% {
    transform: translateX(250px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(7) {
  animation: rotate7 2s -1.4s infinite;
  transform: translateX(300px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate7 {
  100% {
    transform: translateX(300px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(8) {
  animation: rotate8 2s -1.6s infinite;
  transform: translateX(350px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate8 {
  100% {
    transform: translateX(350px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(9) {
  animation: rotate9 2s -1.8s infinite;
  transform: translateX(400px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate9 {
  100% {
    transform: translateX(400px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(10) {
  animation: rotate10 2s -2s infinite;
  transform: translateX(450px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate10 {
  100% {
    transform: translateX(450px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(11) {
  animation: rotate11 2s -2.2s infinite;
  transform: translateX(500px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate11 {
  100% {
    transform: translateX(500px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(12) {
  animation: rotate12 2s -2.4s infinite;
  transform: translateX(550px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate12 {
  100% {
    transform: translateX(550px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(13) {
  animation: rotate13 2s -2.6s infinite;
  transform: translateX(600px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate13 {
  100% {
    transform: translateX(600px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(14) {
  animation: rotate14 2s -2.8s infinite;
  transform: translateX(650px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate14 {
  100% {
    transform: translateX(650px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(15) {
  animation: rotate15 2s -3s infinite;
  transform: translateX(700px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate15 {
  100% {
    transform: translateX(700px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(16) {
  animation: rotate16 2s -3.2s infinite;
  transform: translateX(750px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate16 {
  100% {
    transform: translateX(750px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(17) {
  animation: rotate17 2s -3.4s infinite;
  transform: translateX(800px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate17 {
  100% {
    transform: translateX(800px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(18) {
  animation: rotate18 2s -3.6s infinite;
  transform: translateX(850px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate18 {
  100% {
    transform: translateX(850px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(19) {
  animation: rotate19 2s -3.8s infinite;
  transform: translateX(900px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate19 {
  100% {
    transform: translateX(900px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(20) {
  animation: rotate20 2s -4s infinite;
  transform: translateX(950px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate20 {
  100% {
    transform: translateX(950px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(21) {
  animation: rotate21 2s -4.2s infinite;
  transform: translateX(1000px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate21 {
  100% {
    transform: translateX(1000px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(22) {
  animation: rotate22 2s -4.4s infinite;
  transform: translateX(1050px) translateZ(70px) rotatex(0deg);
}

@keyframes rotate22 {
  100% {
    transform: translateX(1050px) translateZ(70px) rotateX(360deg);
  }
}
.circle:nth-child(23) {
  animation: rotate23 2s -4.6s infinite;
  transform.........完整代码请登录后点击上方下载按钮下载查看