A Pen by Hugo Darby-Brown.

DNA-Double-Helix.markdown

DNA Double Helix

Created a lighting effect by changing the opacity when the LI are perpendicular to the monitor

A Pen by Hugo Darby-Brown on CodePen.

License.

index.html

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

style.scss

@import "compass";
$color1: #3498db;
$color2: #c0392b;
$number: 100;
$shading-amount: 0.4; // 0.1 to 1 


html {
  background-color: black;
  font-size: 7px;
}

ul {
   transform: rotateZ(10deg);
  list-style: none;
  transform-style: preserve-3d;
}

li {
  animation: spin 12s linear infinite;
  @include background-image(linear-gradient(left,  rgba($color2, 1) 46%,rgba($color1,1) 47%));
  box-shadow: -1.5rem 0 0 $color2, 1.5rem 0 0 $color1;
  border-radius: 1rem;
  height: 1rem;
  margin: 1rem auto;
  position: relative;
  width: 25rem; 
  
  &:before, &:after {
    background: $color1;
    border-radius: 50%;
    content: '';
    height: 2rem;
    position: absolute;
    top: -0.5rem;
    width: 2rem;
  }
  &:before {
    background: $color2;
    left: -1rem; 
  }
  &:after {
    right: -1rem; 
  } 
  
  @for $i from 0 through $number {
    &:nth-child(#{$i}) {
      animation-delay: -$i * 0.2s;
      
    }
  }
  
}

@keyframes spin {
  0% {
    transform:  rotateY(0deg); 
    opacity: 1; 
  }
  
  25% {
    opacity: 1 - $shading-amount; 
  }
  
  50% {
    opacity: 1;  
  }
  
  75% {
    opacity: 1 - $shading-amount; 
  }
  
  100% {
    opacity: 1; 
    transform:  rotateY(360deg); 
  }
  
}