Skip to content

Instantly share code, notes, and snippets.

@lostintangent

lostintangent/good-night.markdown

Created July 17, 2020 18:47
Show Gist options
  • Save lostintangent/6b8e8a67d5fae614bfab9f7254379112 to your computer and use it in GitHub Desktop.
Save lostintangent/6b8e8a67d5fae614bfab9f7254379112 to your computer and use it in GitHub Desktop.
Download ZIP
Good night
Raw
index.html
<div class="container">
<div class="stars">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="sheep">
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="face"></div>
<div class="ear"></div>
<div class="tail"></div>
<div class="legs"><div></div><div></div><div></div><div></div></div>
</div>
<div class="sheep">
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="face"></div>
<div class="ear"></div>
<div class="tail"></div>
<div class="legs"><div></div><div></div><div></div><div></div></div>
</div>
<div class="sheep">
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="circle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="face"></div>
<div class="ear"></div>
<div class="tail"></div>
<div class="legs"><div></div><div></div><div></div><div></div></div>
</div>
<div class="shadows">
<div></div><div></div><div></div>
</div>
<div class="rocks">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="rocks">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div>
<a href="https://twitter.com/amit_sheen" class="twitterLink" target="_blank">
<img src="https://assets.codepen.io/1948355/twitterLogo2.png" />
</a>
Raw
style.scss
//08
* {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: #ddd;
color: #777;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
min-height: 420px;
overflow: hidden;
background-image: linear-gradient(0deg, #575, #797 200px, #bdf 205px, #435);
}
.stars > * {
position: absolute;
width: 5px; height: 5px;
animation:
starsRotate 5s infinite linear,
starsOpacity 3.5s infinite ease-in-out alternate;
@keyframes starsRotate {
to { transform: rotate(90deg); }
}
@keyframes starsOpacity {
from { opacity: 0.1; }
to { opacity: 0; }
}
@for $i from 0 to 21 {
&:nth-child(#{$i}) {
animation-delay: random(350) / -10 + s;
left: #{(($i * 5) - 2.5) + "%"};
top: #{random(50) + "%"};
}
}
&::before {
content: '';
position: absolute;
top: 0%; left: 50%;
width: 25px; height: 5px;
background-color: #fff;
transform: skewX(80deg) translate(-50%, -0%);
}
&::after {
content: '';
position: absolute;
top: 50%; left: 0%;
width: 5px; height: 25px;
background-color: #fff;
transform: skewY(-80deg) translate(-0%, -50%);
}
}
.sheep {
position: absolute;
width: 140px;
height: 140px;
transform: translate(-50%, -50%);
&:nth-child(2) { --sheepDelay: -0s; }
&:nth-child(3) { --sheepDelay: -4s; }
&:nth-child(4) { --sheepDelay: -8s; }
animation:
sheepX 12s var(--sheepDelay) infinite linear,
sheepY 12s var(--sheepDelay) infinite ease-in-out,
sheepA 12s var(--sheepDelay) infinite ease-in-out;
@keyframes sheepX {
from { left: calc(50% + 1100px);}
to { left: calc(50% - 1100px);}
}
@keyframes sheepY {
0%, 35%, 66%, 100% { bottom: 100px; }
50% { bottom: 150px; }
}
@keyframes sheepA {
0%, 35%, 68%, 100% { transform: translate(-50%, -50%) rotate(0); }
40% { transform: translate(-50%, -50%) rotate(20deg); }
60% { transform: translate(-50%, -50%) rotate(-5deg); }
}
.circle {
position: absolute;
width: 100px; height: 100px;
background-color: #fff;
background-image: radial-gradient(circle at 50% 90%, #fff, #999);
border-radius: 50%;
& > * {
$borderWidth: 4px;
position: absolute;
border-radius: 50%;
border: 0px solid #777;
&:nth-child(1) {
top: 45px; left: 40px;
width: 10px; height: 10px;
border-left-width: $borderWidth;
}
&:nth-child(2) {
top: 40px; left: 40px;
width: 20px; height: 20px;
border-top-width: $borderWidth;
}
&:nth-child(3) {
top: 40px; left: 35px;
width: 30px; height: 30px;
border-right-width: $borderWidth;
}
&:nth-child(4) {
top: 35px; left: 25px;
width: 40px; height: 40px;
border-bottom-width: $borderWidth;
}
&:nth-child(5) {
top: 25px; left: 20px;
width: 50px; height: 50px;
border-left-width: $borderWidth;
}
&:nth-child(6) {
top: 20px; left: 20px;
width: 60px; height: 60px;
border-top-width: $borderWidth;
}
&:nth-child(7) {
top: 20px; left: 15px;
width: 70px; height: 70px;
border-right-width: $borderWidth;
}
&:nth-child(8) {
top: 15px; left: 5px;
width: 80px; height: 80px;
border-bottom-width: $borderWidth;
}
&:nth-child(9) {
top: 5px; left: 0px;
width: 90px; height: 90px;
border-left-width: $borderWidth;
}
&:nth-child(10) {
top: 0px; left: 0px;
width: 100px; height: 100px;
border-width: $borderWidth $borderWidth 0 0;
}
}
@for $i from 1 to 11 {
&:nth-child(#{$i}) {
transform: scale(#{0.35 + (random(2) / 10)}) rotate(#{random(360)}deg);
}
}
&:nth-child(1) { top: -30px; left: 20px; }
&:nth-child(2) { top: -30px; left: 60px; }
&:nth-child(3) { top: 0px; left: 80px; }
&:nth-child(4) { top: 30px; left: 60px; }
&:nth-child(5) { top: 30px; left: 20px; }
&:nth-child(6) { top: 30px; left: -20px; }
&:nth-child(7) { top: 0px; left: -40px; }
&:nth-child(8) { top: -30px; left: -20px; }
&:nth-child(9) { top: 0px; left: 0px; }
&:nth-child(10) { top: 0px; left: 40px; }
&:nth-child(11) {
top: -50px; left: -45px;
transform: scale(0.3) rotate(#{random(360)}deg);
}
}
.face {
position: absolute;
top: -5px; left: -75px;
width: 100px; height: 60px;
background-color: #fda;
background-image: radial-gradient(circle at 50% 0%, #fda 50%, #987);
border: solid #432;
border-width: 1px 0 1px 1px;
border-radius: 50%;
transform: rotate(-15deg);
overflow: hidden;
z-index: -1;
&::before {
content: '';
position: absolute;
top: 10px; left: 50px;
width: 10px; height: 15px;
background-color: #432;
border-radius: 50%;
}
&::after {
content: '';
position: absolute;
top: 25px; left: -50px;
width: 80px; height: 20px;
border-bottom: 3px solid #432;
border-radius: 50%;
}
}
.ear {
position: absolute;
top: 3px; left: -3px;
width: 20px; height: 30px;
background-color: #432;
border-radius: 10px 10px 5px 20px;
transform: rotate(-15deg);
&::after {
content: '';
position: absolute;
top: 5px; left: 5px;
width: 10px; height: 15px;
background-color: #654;
border-radius: 5px 5px 0px 7px;
}
}
.tail {
position: absolute;
top: 15px; left: 130px;
width: 50px; height: 30px;
border-bottom: 5px solid #432;
border-radius: 50%;
z-index: -1;
transform-origin: 25% 100%;
animation: wag 0.25s ease-in-out infinite alternate;
@keyframes wag {
from { transform: rotate(-5deg); }
to { transform: rotate(5deg); }
}
}
.legs > * {
position: absolute;
left: 0px;
width: 14px; height: 35px;
background-image: linear-gradient(to right, #555, #999 25%, #333);
perspective: 100px;
perspective-origin: center;
z-index: -1;
transform-origin: top;
animation:
legs 12s infinite ease-in-out,
legsTop 12s infinite ease-in-out;
&::after {
content: '';
position: absolute;
top: 20px; left: -3px;
width: 20px; height: 40px;
background-color: #333;
border-radius: 10px;
border: 1px solid #666;
transform: rotateX(80deg);
}
&:nth-child(1) { left: 15px; animation-delay: calc(var(--sheepDelay) - 5.25s), calc(var(--sheepDelay) - 4.95s); }
&:nth-child(2) { left: 25px; animation-delay: calc(var(--sheepDelay) - 5.10s), calc(var(--sheepDelay) - 4.80s); }
&:nth-child(3) { left: 100px; animation-delay: calc(var(--sheepDelay) - 4.95s), calc(var(--sheepDelay) - 4.65s); }
&:nth-child(4) { left: 110px; animation-delay: calc(var(--sheepDelay) - 4.80s), calc(var(--sheepDelay) - 4.50s); }
--legScale: 1;
&:nth-child(2n) {
--legScale: 0.9, 1;
z-index: -2;
}
@keyframes legs {
0%, 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 100% { transform: rotate(15deg) scale(var(--legScale)); }
10%, 20%, 30%, 40%, 50%, 60%, 70%, 80% { transform: rotate(-15deg) scale(var(--legScale)); }
}
@keyframes legsTop {
0%, 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 90%, 100% { top: 90px }
10%, 20%, 30%, 40%, 50%, 60%, 70%, 80% { top: 80px }
}
}
}
.shadows > * {
position: absolute;
bottom: 158px;
height: 12px;
width: 120px;
transform: translate(-50%, -50%);
&:nth-child(1) { --shadowDelay: -0s; }
&:nth-child(2) { --shadowDelay: -4s; }
&:nth-child(3) { --shadowDelay: -8s; }
animation:
shadowX 12s var(--shadowDelay) infinite linear,
shadowW 12s var(--shadowDelay) infinite ease-in-out;
@keyframes shadowX {
from { left: calc(50% + 1100px);}
to { left: calc(50% - 1100px);}
}
@keyframes shadowW {
0%, 35%, 66%, 100% { border-right: 140px solid #000; filter: blur(15px);}
45%, 50% { border-right: 0px solid #000; filter: blur(30px);}
}
}
.rocks {
&:nth-child(6) > *:nth-child(n+20) {
background-color: #000;
box-shadow: 0 0 20px #353;
}
&:nth-child(7) > * {
background-image: radial-gradient(#777, #333);
border: 1px solid #555;
}
& > * {
position: absolute;
left: 50%;
width: 50px; height: 50px;
z-index: -1;
$y:0;
@for $i from 1 to 41 {
$y: $y + ($i * 0.25);
&:nth-child(#{$i}) {
bottom: #{200 - ($y)}px;
border-radius: (random(30) + 20px) (random(30) + 20px) (random(30) + 20px) (random(30) + 20px);
transform: scale(#{$i * 0.05}) translate((random(160) - 80%), 0%) rotate(random(360) + deg);
}
}
}
}
.twitterLink {
position: fixed;
bottom: 0.5em; right: 0.5em;
& img {
width: 2em;
filter: grayscale(100%);
transition: filter 0.25s;
&:hover {
filter: grayscale(0%);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment