css实现数据螺旋线三维扭转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现数据螺旋线三维扭转动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
  
  
  
<style>
body {
  overflow: hidden;
  height: 100vh;
  perspective: 40em;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), #000), url("https://pbs.twimg.com/media/CsjHEVFW8AA7uDs.jpg") 50% no-repeat #000;
  background-blend-mode: luminosity;
  color: lime;
  font: 1.5em/2 vt323, monospace;
}

div {
  position: absolute;
}

.helix {
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.col {
  transform-style: preserve-3d;
  animation: rx 10s linear infinite;
}
.col:nth-child(1) {
  left: -30em;
  animation-delay: 0s;
}
.col:nth-child(1) :nth-child(1):before {
  animation-delay: -2s;
}
.col:nth-child(1) :nth-child(2):before {
  animation-delay: -1.4s;
}
.col:nth-child(1) :nth-child(3):before {
  animation-delay: -1.2s;
}
.col:nth-child(1) :nth-child(4):before {
  animation-delay: -1s;
}
.col:nth-child(1) :nth-child(5):before {
  animation-delay: -2s;
}
.col:nth-child(1) :nth-child(6):before {
  animation-delay: -1s;
}
.col:nth-child(1) :nth-child(7):before {
  animation-delay: -1.8s;
}
.col:nth-child(1) :nth-child(8):before {
  animation-delay: -1.8s;
}
.col:nth-child(2) {
  left: -28.5em;
  animation-delay: -0.25s;
}
.col:nth-child(2) :nth-child(1):before {
  animation-delay: -1.2s;
}
.col:nth-child(2) :nth-child(2):before {
  animation-delay: -0.6s;
}
.col:nth-child(2) :nth-child(3):before {
  animation-delay: -1s;
}
.col:nth-child(2) :nth-child(4):before {
  animation-delay: -0.4s;
}
.col:nth-child(2) :nth-child(5):before {
  animation-delay: -1.8s;
}
.col:nth-child(2) :nth-child(6):before {
  animation-delay: -1.8s;
}
.col:nth-child(2) :nth-child(7):before {
  animation-delay: -2s;
}
.col:nth-child(2) :nth-child(8):before {
  animation-delay: -0.4s;
}
.col:nth-child(3) {
  left: -27em;
  animation-delay: -0.5s;
}
.col:nth-child(3) :nth-child(1):before {
  animation-delay: -0.4s;
}
.col:nth-child(3) :nth-child(2):before {
  animation-delay: -0.2s;
}
.col:nth-child(3) :nth-child(3):before {
  animation-delay: -0.2s;
}
.col:nth-child(3) :nth-child(4):before {
  animation-delay: -0.8s;
}
.col:nth-child(3) :nth-child(5):before {
  animation-delay: -1.8s;
}
.col:nth-child(3) :nth-child(6):before {
  animation-delay: -0.4s;
}
.col:nth-child(3) :nth-child(7):before {
  animation-delay: -0.2s;
}
.col:nth-child(3) :nth-child(8):before {
  animation-delay: -0.2s;
}
.col:nth-child(4) {
  left: -25.5em;
  animation-delay: -0.75s;
}
.col:nth-child(4) :nth-child(1):before {
  animation-delay: -1.4s;
}
.col:nth-child(4) :nth-child(2):before {
  animation-delay: -1.4s;
}
.col:nth-child(4) :nth-child(3):before {
  animation-delay: -1.8s;
}
.col:nth-child(4) :nth-child(4):before {
  animation-delay: -1.6s;
}
.col:nth-child(4) :nth-child(5):before {
  animation-delay: -0.8s;
}
.col:nth-child(4) :nth-child(6):before {
  animation-delay: -1s;
}
.col:nth-child(4) :nth-child(7):before {
  animation-delay: -0.4s;
}
.col:nth-child(4) :nth-child(8):before {
  animation-delay: -1s;
}
.col:nth-child(5) {
  left: -24em;
  animation-delay: -1s;
}
.col:nth-child(5) :nth-child(1):before {
  animation-delay: -1s;
}
.col:nth-child(5) :nth-child(2):before {
  animation-delay: -0.8s;
}
.col:nth-child(5) :nth-child(3):before {
  animation-delay: -1.8s;
}
.col:nth-child(5) :nth-child(4):before {
  animation-delay: -1.2s;
}
.col:nth-child(5) :nth-child(5):before {
  animation-delay: -1.2s;
}
.col:nth-child(5) :nth-child(6):before {
  animation-delay: -0.4s;
}
.col:nth-child(5) :nth-child(7):before {
  animation-delay: -0.2s;
}
.col:nth-child(5) :nth-child(8):before {
  animation-delay: -0.2s;
}
.col:nth-child(6) {
  left: -22.5em;
  animation-delay: -1.25s;
}
.col:nth-child(6) :nth-child(1):before {
  animation-delay: -1.8s;
}
.col:nth-child(6) :nth-child(2):before {
  animation-delay: -0.6s;
}
.col:nth-child(6) :nth-child(3):before {
  animation-delay: -0.8s;
}
.col:nth-child(6) :nth-child(4):before {
  animation-delay: -0.8s;
}
.col:nth-child(6) :nth-child(5):before {
  animation-delay: -0.2s;
}
.col:nth-child(6) :nth-child(6):before {
  animation-delay: -0.2s;
}
.col:nth-child(6) :nth-child(7):before {
  animation-delay: -1s;
}
.col:nth-child(6) :nth-child(8):before {
  animation-delay: -1.2s;
}
.col:nth-child(7) {
  left: -21em;
  animation-delay: -1.5s;
}
.col:nth-child(7) :nth-child(1):before {
  animation-delay: -1.8s;
}
.col:nth-child(7) :nth-child(2):before {
  animation-delay: -1.4s;
}
.col:nth-child(7) :nth-child(3):before {
  animation-delay: -1.8s;
}
.col:nth-child(7) :nth-child(4):before {
  animation-delay: -1.2s;
}
.col:nth-child(7) :nth-child(5):before {
  animation-delay: -0.8s;
}
.col:nth-child(7) :nth-child(6):before {
  animation-delay: -1.6s;
}
.col:nth-child(7) :nth-child(7):before {
  animation-delay: -1.2s;
}
.col:nth-child(7) :nth-child(8):before {
  animation-delay: -1.6s;
}
.col:nth-child(8) {
  left: -19.5em;
  animation-delay: -1.75s;
}
.col:nth-child(8) :nth-child(1):before {
  animation-delay: -1.8s;
}
.col:nth-child(8) :nth-child(2):before {
  animation-delay: -0.4s;
}
.col:nth-child(8) :nth-child(3):before {
  animation-delay: -0.4s;
}
.col:nth-child(8) :nth-child(4):before {
  animation-delay: -0.8s;
}
.col:nth-child(8) :nth-child(5):before {
  animation-delay: -0.4s;
}
.col:nth-child(8) :nth-child(6):before {
  animation-delay: -0.8s;
}
.col:nth-child(8) :nth-child(7):before {
  animation-delay: -1.6s;
}
.col:nth-child(8) :nth-child(8):before {
  animation-delay: -0.2s;
}
.col:nth-child(9) {
  left: -18em;
  animation-delay: -2s;
}
.col:nth-child(9) :nth-child(1):before {
  animation-delay: -0.6s;
}
.col:nth-child(9) :nth-child(2):before {
  animation-delay: -0.8s;
}
.col:nth-child(9) :nth-child(3):before {
  animation-delay: -0.2s;
}
.col:nth-child(9) :nth-child(4):before {
  animation-delay: -1s;
}
.col:nth-child(9) :nth-child(5):before {
  animation-delay: -0.6s;
}
.col:nth-child(9) :nth-child(6):before {
  animation-delay: -2s;
}
.col:nth-child(9) :nth-child(7):before {
  animation-delay: -1.6s;
}
.col:nth-child(9) :nth-child(8):before {
  animation-delay: -1.4s;
}
.col:nth-child(10) {
  left: -16.5em;
  animation-delay: -2.25s;
}
.col:nth-child(10) :nth-child(1):before {
  animation-delay: -1.8s;
}
.col:nth-child(10) :nth-child(2):before {
  animation-delay: -0.8s;
}
.col:nth-child(10) :nth-child(3):before {
  animation-delay: -0.8s;
}
.col:nth-child(10) :nth-child(4):before {
  animation-delay: -0.6s;
}
.col:nth-child(10) :nth-child(5):before {
  animation-delay: -0.2s;
}
.col:nth-child(10) :nth-child(6):before {
  animation-delay: -0.8s;
}
.col:nth-child(10) :nth-child(7):before {
  animation-delay: -1s;
}
.col:nth-child(10) :nth-child(8):before {
  animation-delay: -2s;
}
.col:nth-child(11) {
  left: -15em;
  animation-delay: -2.5s;
}
.col:nth-child(11) :nth-child(1):before {
  animation-delay: -0.4s;
}
.col:nth-child(11) :nth-child(2):before {
  animation-delay: -1.6s;
}
.col:nth-child(11) :nth-child(3):before {
  animation-delay: -0.8s;
}
.col:nth-child(11) :nth-child(4):before {
  animation-delay: -1.4s;
}
.col:nth-child(11) :nth-child(5):before {
  animation-delay: -1.8s;
}
.col:nth-child(11) :nth-child(6):before {
  animation-delay: -1.6s.........完整代码请登录后点击上方下载按钮下载查看