Vapor Sun

index.slim

input#vhs type="checkbox"
label for="vhs" 📼
.scene
  .container
    .sun
    - for i in (0..9)
      .band style="animation-delay: -#{i}s"

style.scss

$bg: #112;
$size: 30vw;

html, body {
  height: 100%;
  background-color: $bg;
}

input[type="checkbox"] {
  display: none;
  
  &:checked ~ label {
    transform: translate(0,-0.65em);
    padding-bottom: 0.65em;
  }
  
  &:checked ~ .scene {
    background-color: #00ffff;
    animation: hue-rotate 60s linear infinite 0s;
  }

  &:checked ~ .scene .container {
    filter: blur(0.75vw) contrast(3);

    & .sun {
      background: radial-gradient(transparent 65%, #fd1 100%),
        linear-gradient(#f53 0, #fd1 100%);
      animation: initial;
    }

    & .band {
      background-color: #5affff;
    }
  }
}

label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding-left: 0.1em;
  font-size: 4em;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.scene {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: $bg;
}

.container {
  position: relative;
  height: $size;
  width: $size;
  overflow: hidden;
}

.sun {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: $size;
  height: $size;
  background: radial-gradient(transparent 65%, #ff0488 100%),
    linear-gradient(#ffcb55 0, #ff0488 100%);
  border-radius: 50%;
  animation: hue-rotate 60s ease-in-out infinite 5s;
}

.band {
  position: absolute;
  bottom: $size/-5;
  width: 100%;
  height: 10%;
  background: $bg;
  animation: wave 10s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateY(0) scaleY(1);
  }
  100% {
    transform: translateY($size*-0.8) scaleY(0);
  }
}

@keyframes hue-rotate {
  0% {
    filter: hue-rotate(360deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}

vapor-sun.markdown

Vapor Sun

Tap the 📼 for an added effect!

A Pen by David J. Aldred on CodePen.

License.