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

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

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