night run

index.haml

.lt
.rt
.wrap
 .cube
  .face.road
  - 10.times do
   .face.building1.left
  - 10.times do
   .face.building1.right
  - 10.times do
   .face.building1.left.outer
  - 10.times do
   .face.building1.right.outer

night-run.markdown

night run

some nights I go out and run some nights I stay in and write css

A Pen by Adam Kuhn on CodePen.

License.

style.scss

$p1: #835768;
$p2: #fcb3a4;
$p3: #8a5967;
$g: #2c2334;
$t: rgba(255,255,255,0);

body{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:radial-gradient(circle at center, darken($g, 5%), $g);
  overflow:hidden;
  &:before, &:after{
    content:'';
    position:absolute;
    width:200%;
    height:50%;
    left:-50%;
    top:calc(50% + 10px);
    background:darken($p1, 10%);
  }
  &:after{
    z-index:-1;
    height:calc(50% + 500px);
    top:-250px;
    background:linear-gradient(to top, darken($g, 5%), $t), radial-gradient(circle at center, $p2, $p2 1px, $t 1px, $t 20px), radial-gradient(circle at center, $p2, $p2 1px, $t 1px, $t 20px);
    background-size:100%, 100px 100px, 100px 100px;
    background-position:50%, 40px 40px, 0px 90px;
    opacity:0.75;
    transform-style:preserve-3d;
    animation:starwipe 10s linear infinite;
    @keyframes starwipe{
      0%{
        transform:skewX(20deg);
      }
      50%{
        transform:skewX(0deg);
      }
      100%{
        transform:skewX(20deg);
      }
    }
    
  }
  .lt{
    position:absolute;
    z-index:9;
    width:40%;
    height:100%;
    left:0;
    top:0;
    &:hover{
      &~.wrap{
        perspective-origin:75% 50%; 
    }
      
    }
    
  }
  .rt{
    position:absolute;
    z-index:9;
    width:40%;
    height:100%;
    right:0;
    top:0;
    &:hover{
      &~.wrap{
        perspective-origin:25% 50%; 
    }
      
    }
    
  }
  .wrap{
    width:400px;
    height:200px;
    perspective:20px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    transition:0.4s ease-in-out;
    .cube {
      width: 100%;
      height: 200%;
      position: absolute;
      transform-style: preserve-3d;
      transform:rotateX(0deg);

      .face{
          margin: 0;
          width: 400px;
          height: 100%;
          display: block;
          position: absolute;
          
          &:nth-of-type(1){ 
            //front
            transform: rotateY(   0deg ) translateZ( 200px ); }
          &:nth-of-type(2){ 
            //back
            transform: rotateX( 180deg ) translateZ( 200px ); }
          &:nth-of-type(3){ 
            //right
            transform: rotateY(  90deg ) translateZ( 200px ); }
        
          &.building1{ 
            &.outer{
              margin-left:-2000px;
              animation-duration:10s;
            }
            margin-left:-500px;
            transform: rotateY( -90deg ) translateZ( 25px );          transform-style:preserve-3d;
            background:$p1;
            width:50px;
            height:800px;
            bottom:0px;
            animation:lefttoright 7s ease-in-out infinite;
            @for $i from 1 through 40{
              &:nth-of-type(#{$i}){
                animation-delay:#{$i * -0.75}s;
              }
            }
            &:nth-of-type(3n){
              height:400px;
            }
            &:nth-of-type(4n){
              height:600px;
              margin-left:-700px;
            }
            &:nth-of-type(6n){
              height:1400px;
            }
            @keyframes lefttoright{
              0%{
                transform: rotateY( -90deg ) translateZ( 25px ) translateX(-1000%);
                background:darken($p1, 20%);
              }
              100%{
                transform: rotateY( -90deg ) translateZ( 25px ) translateX(200%);
                background:$p1;
                
              }
            }
            &:before{
              content:'';
              position:absolute;
              width:300px;
              height:100%;
              background:linear-gradient(to bottom, $p2, $p3);
              top:0;
              left:0;
              transform:rotateY(90deg) translateZ( -250px );
              transform-origin:100% 50%;
              
            }
            &.right{
              margin-left:800px;
              &.outer{
                margin-left:2000px;
                animation-duration:10s;
              }
              &:before{
                transform:rotateY(90deg) translateZ( -250px ) translateX(100%);
              }
              &:nth-of-type(4n){
              height:600px;
              margin-left:1000px;
            }
              &:nth-of-type(6n){
                height:1200px;
              }
            }
        
        
        }
        
          &:nth-of-type(5){ 
            //top
            transform: rotateX(  90deg ) translateZ( 200px ); }
          
          &.road{ 
            //bottom
            height:200%;
            top:-75%;
            background:repeating-linear-gradient(to bottom, transparent, transparent 5px, $g 5px, $g 15px), linear-gradient(to right, $g, $g 48%, $p2 48%, $p2 52%, $g 52%);
            transform: rotateX( -90deg ) translateZ( 200px );
            animation: animatedBackground 30s linear infinite;
            @keyframes animatedBackground {
              from { background-position: 0 1000px; }
              to { background-position: 0 -1000px; }
            }
        
        }
          
        
      }
    }
  
  }
  
  
}