.dna
 -for(var i=0;i<20;i++)
  .ele
View Compiled
:root {
  --bg-color: radial-gradient(circle at center, #fff, #ccc);
  --dot-color1:deepskyblue;
  --dot-color2:#000;
  // @media (min-width: 640px) {
  //   --bg-color: $c2;
  // }
  // @media (min-width:980px) {
  //   --bg-color: $c3;
  // }
}

body {
  background: var(--bg-color);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
$width:10px;
$height:$width*7;
$n:20;
$t:3s;
$gap:8px;
.dna {
  width: (2 + $gap*2) * $n;
  height: $height;
  perspective: 400px;
  transform-style: preserve-3d;
  // transform:rotateZ(90deg);
}

.ele {
  width: 1px;
  height: $height;
  float: left;
  margin: 0 $gap;
  border-left: 1px #B0B0B0 dashed;
  position: relative;
  transform: rotateX(-360deg);
  animation: run 2s linear infinite;
  &:before,
  &:after {
    content: '';
    width: $width;
    height: $width;
    background: var(--dot-color1);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  &:before {
    top: -2px;
    background: var(--dot-color2);
  }
  &:after {
    bottom: -2px;
  }
  @for $i from 1 through $n {
    &:nth-of-type(#{$i}) {
      animation-delay: $t/$n*$i*-1;
    }
  }
}

@keyframes run {
  to {
    transform: none;
  }
}
View Compiled
Rerun