Tap the 📼 for an added effect!
A Pen by David J. Aldred on CodePen.
input#vhs type="checkbox" | |
label for="vhs" 📼 | |
.scene | |
.container | |
.sun | |
- for i in (0..9) | |
.band style="animation-delay: -#{i}s" |
$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); | |
} | |
} |
Tap the 📼 for an added effect!
A Pen by David J. Aldred on CodePen.