SASS
*
box-sizing: border-box
body
background-color: #222
h1
font: 400 20vw/1.1 "Luckiest Guy", sans-serif
text-align: center
text-shadow: .0125em 0 0 #222, 0 .0125em 0 #222, -.025em 0 #222
position: relative
z-index: 1
@mixin cloud($size, $x, $y)
padding-bottom: $size
width: $size
left: $x
top: $y
.clouds
position: relative
padding: 8% 0 1%
background-size: 8% 8%
background-position: 0 0, 4% 4%
border: .5em solid #fff
margin: 0 0 .125em
.clouds.css
color: #e3363b
background-color: #47B4E6
background-image: radial-gradient(#58bbe8 15%, transparent 16%), radial-gradient(#6ac2eb 15%, transparent 16%)
.clouds.html
color: #7947e6
background-color: #b4e647
background-image: radial-gradient(#bbe858 15%, transparent 16%), radial-gradient(#c2eb6a 15%, transparent 16%)
.clouds.js
color: #f05c00
background-color: #ffe205
background-image: radial-gradient(#ffe940 15%, transparent 16%), radial-gradient(#ffeb53 15%, transparent 16%)
.cloud
background: #fff
border-radius: 50%
position: absolute
z-index: 1
animation: 4s drift reverse infinite
&:nth-child(1)
@include cloud(24%, 10%, 42%)
box-shadow: -.75vw .5vw 0 #222
animation-delay: -2s
&:nth-child(2)
@include cloud(33%, 50%, 22%)
box-shadow: .5vw -.5vw 0 #222
animation-delay: -.2s
&:nth-child(3)
@include cloud(20%, 15%, 21%)
box-shadow: -.5vw -.5vw 0 #222
animation-delay: -1s
&:nth-child(4)
@include cloud(11%, 12%, 37%)
box-shadow: -.5vw -.25vw 0 #222
animation-delay: -1.2s
&:nth-child(5)
@include cloud(40%, 21%, 18%)
box-shadow: 0 -.5vw #222, 0 0.33vw #222
z-index: 0
&:nth-child(6)
@include cloud(18%, 67%, 43%)
box-shadow: .5vw .25vw 0 #222
animation-delay: -.8s
&:nth-child(7)
@include cloud(25%, 50%, 44%)
box-shadow: -.125vw .5vw 0 #222
animation-delay: -1.4s
&:nth-child(8)
@include cloud(18%, 39%, 52%)
box-shadow: 0 .5vw 0 #222
animation-delay: -2s
&:nth-child(9)
@include cloud(22%, 22%, 46%)
box-shadow: 0 .5vw 0 #222
z-index: 0
@keyframes drift
33%
transform: translate(-5%, 6%)
66%
transform: translate(-4%, 3%)
