Dreams

dreams.markdown

Dreams

Various dreams on a border-style: dashed, endless, color-changing road.

Best viewed in Chrome.

A Pen by Leetcodes on CodePen.

License.

index.html

<Horizon></Horizon>
<Road></Road>

style.scss

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 10vmin;
  background: #000;
  overflow: hidden;
}

Horizon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 30%;
  background-size: cover;
  box-shadow:
    0 1px 30px 25px #000,
    inset 0 -25px 150px 25px #000;
  animation:
    change-dream 30s infinite;
}

Road {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border-right: 1px dashed #fff;
  box-sizing: border-box;
  background: #000;
  animation:
    move-forward 1s infinite linear,
    radiate 25s infinite linear;
}

@keyframes move-forward {
  from {
    transform:
      rotateX(25deg)
      scale(50, 50)
      translateX(-55%)
  }

  to {
    transform:
      rotateX(25deg)
      scale(50, 50)
      translateX(-55%)
      rotate(22.5deg)
  }
}

@keyframes radiate {
  from, to {
    box-shadow:
      0 0 0 5px #000,
      0 0 10px 5px hotpink;
  }

  20% {
    box-shadow:
      0 0 0 5px #000,
      0 0 10px 5px crimson;
  }

  40% {
    box-shadow:
      0 0 0 5px #000,
      0 0 10px 5px gold;
  }

  60% {
    box-shadow:
      0 0 0 5px #000,
      0 0 10px 5px mediumspringgreen;
  }

  80% {
    box-shadow:
      0 0 0 5px #000,
      0 0 10px 5px cyan;
  }
}

@keyframes change-dream {
  from, 17%, to {
    background-image: url(https://78.media.tumblr.com/67f37f09a5ce275192ddafc8f77af083/tumblr_oy13gs1fDi1vq64mxo1_500.gif);
    background-position: center 65%;
  }

  20%, 37% {
    background-image: url(https://78.media.tumblr.com/eddc70939c290ed0857ab9f6fc28993c/tumblr_oy13gs1fDi1vq64mxo4_1280.gif);
    background-position: center 60%;
  }

  40%, 57% {
    background-image: url(https://78.media.tumblr.com/854dcc82fbe900a924b2a86c8b125c99/tumblr_oy13gs1fDi1vq64mxo5_400.gif);
    background-position: center center;
  }

  60%, 77% {
    background-image: url(https://78.media.tumblr.com/42e31d431252210a6c9700fe1c3b8f28/tumblr_oy13gs1fDi1vq64mxo2_500.gif);
    background-position: center 10%;
  }

  80%, 97% {
    background-image: url(https://78.media.tumblr.com/844c52f11b929b78b7512fd6ec90335a/tumblr_oy13gs1fDi1vq64mxo3_1280.gif);
    background-position: center center;
  }
}