Inspired by Pokemon Go, a CSS-only animated version of Eevee. Works best in Chrome and Firefox.
A Pen by David Khourshid on CodePen.
Inspired by Pokemon Go, a CSS-only animated version of Eevee. Works best in Chrome and Firefox.
A Pen by David Khourshid on CodePen.
<div class="eevee"> | |
<div class="body"> | |
<div class="head"> | |
<div class="ears"> | |
<div class="ear"> | |
<div class="lobe"></div> | |
</div> | |
<div class="ear"> | |
<div class="lobe"></div> | |
</div> | |
</div> | |
<div class="face"> | |
<div class="eyes"> | |
<div class="eye"> | |
<div class="eyelid"></div> | |
</div> | |
<div class="eye"> | |
<div class="eyelid"></div> | |
</div> | |
</div> | |
<div class="nose"></div> | |
<div class="mouth"></div> | |
</div> | |
</div> | |
<div class="chest"> | |
<div class="fur"> | |
<div class="patch"></div> | |
</div> | |
<div class="fur"> | |
<div class="patch"></div> | |
</div> | |
<div class="fur"> | |
<div class="patch"></div> | |
</div> | |
</div> | |
<div class="legs"> | |
<div class="leg"> | |
<div class="inner-leg"></div> | |
</div> | |
<div class="leg"> | |
<div class="inner-leg"></div> | |
</div> | |
<div class="leg"> | |
<div class="inner-leg"></div> | |
</div> | |
<div class="leg"> | |
<div class="inner-leg"></div> | |
</div> | |
</div> | |
<div class="tail"> | |
<div class="tail"> | |
<div class="tail"> | |
<div class="tail"> | |
<div class="tail"> | |
<div class="tail -end"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="dex"> | |
<div class="heading"><div class="pokeball"></div><span>133</span><strong>Eevee</strong></div> | |
<div class="info"><strong>Seen:</strong> 33</div> | |
<div class="info"><strong>Caught:</strong> 33</div> | |
<br /> | |
<div class="info"><strong>Weight:</strong> 6.5kg</div> | |
<div class="info"><strong>Height:</strong> 0.3m</div> | |
<br /> | |
<div class="info"><strong>Type:</strong> Normal</div> | |
<div class="subheading">Evolution Pokemon</div> | |
<p>Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.</p> | |
<div class="subheading">Made by David Khourshid</div> | |
<div class="info"><strong>Twitter:</strong> <a href="http://twitter.com/davidkpiano">@davidkpiano</a></div> | |
</div> |
@import 'https://fonts.googleapis.com/css?family=Lato:100,300,400,700'; | |
$color-fur-edge: #BFB48C; | |
$color-eye: #260F02; | |
$color-body: #C49152; | |
$color-body-dark: #9D7442; | |
$color-body-light: #cca069; | |
$color-ear: #6a3c1c; | |
$color-fur: #EFE1AF; | |
$easing: cubic-bezier(0.645, 0.045, 0.355, 1); | |
$total-kf: 13; | |
$duration: 10s; | |
$k-bounce-down: (0, 1, 2, 3, 4, | |
6, 7, 8, 9, | |
$total-kf); | |
$k-bounce-up: (0.5, 1.5, 2.5, 3.5, | |
6.5, 7.5, 8.5, 9.5,); | |
$k-attack-prep: 10; | |
$kap: $k-attack-prep; // I'm being lazy | |
$k-attack: (10.3, $total-kf - 1); | |
$kf-head: ( | |
$k-bounce-down: translateY(2%), | |
$k-bounce-up: translateY(0), | |
4.5: translateY(2%) rotate(-3deg), | |
5: translateY(-5%) rotate(7deg), | |
$k-attack-prep: translateY(7%) rotate(-3deg), | |
($k-attack-prep + 1): translateY(-7%) rotate(3deg), | |
); | |
$kf-head-shadow: ( | |
$k-bounce-down: translateY(-2%), | |
$k-bounce-up: translateY(1%), | |
4.5: translateY(-5%), | |
5: translateY(5%), | |
$k-attack-prep: translateY(-4%), | |
($k-attack-prep + 1): translateY(10%) scale(0.9) | |
); | |
$kf-eyes: ( | |
$k-bounce-down: rotateX(-7deg) translateZ(10px), | |
$k-bounce-up: rotateX(7deg) translateZ(10px), | |
$k-attack-prep: translateY(5%) rotateX(-20deg) translateZ(10px), | |
($k-attack-prep + 1): rotateX(20deg) translateZ(10px), | |
); | |
$kf-nose: ( | |
$k-bounce-down: translateY(30%), | |
$k-bounce-up: translateY(-20%), | |
$k-attack-prep: translateY(70%), | |
($k-attack-prep + 1): translateY(-60%), | |
); | |
$kf-mouth-move: ( | |
$k-bounce-down: translateY(15%), | |
$k-bounce-up: translateY(-5%), | |
$k-attack-prep: translateY(30%), | |
($k-attack-prep + 1): translateY(-10%), | |
); | |
$kf-body: ( | |
$k-bounce-down: translateY(1%), | |
$k-bounce-up: translateY(0), | |
4.5: translateY(4%), | |
5: translateY(0), | |
$k-attack-prep: translateY(3%), | |
$k-attack: translateY(-5%), | |
); | |
$kf-eyelid: ( | |
(0, | |
3, 3.2, | |
10, | |
$total-kf - 0.6, | |
): translateY(-120%) rotate(-30deg) , | |
( | |
3.05, 3.18, | |
10.05, | |
$total-kf - 0.8, | |
): translateY(0) rotate(0) , | |
$k-attack: translateY(-85%) rotate(30deg), | |
); | |
$kf-mouth: ( | |
(0, $total-kf - 0.9): ( | |
width: 12%, | |
height: 6%, | |
bottom: 13%, | |
left: 33%, | |
border-radius: 50%, | |
box-shadow: 0 -2px $color-eye, | |
border: none, | |
background: transparent, | |
), | |
$k-attack: ( | |
height: 10%, | |
background: #B37B7E, | |
border-top-left-radius: 50% 60%, | |
border-top-right-radius: 50% 60%, | |
border-bottom-left-radius: 50% 40%, | |
border-bottom-right-radius: 50% 40%, | |
box-shadow: inset 0 5px $color-eye, | |
border: 2px solid $color-eye, | |
), | |
); | |
$kf-mouth-side: ( | |
(0, $total-kf - 0.9): (opacity: 1), | |
10.3: (opacity: 0), | |
); | |
$kf-leg: ( | |
$k-bounce-down: rotate(-12deg), | |
$k-bounce-up: rotate(-6deg), | |
4.5: rotate(-16deg), | |
5: rotate(9deg), | |
$k-attack-prep: translateY(-10%) rotate(-18deg), | |
$k-attack: translateY(5%) rotate(0), | |
); | |
$kf-leg-inner: ( | |
$k-bounce-down: rotate(28deg), | |
$k-bounce-up: rotate(16deg), | |
4.5: rotate(40deg), | |
5: rotate(-10deg), | |
$k-attack-prep: rotate(32deg), | |
$k-attack: rotate(0), | |
); | |
$kf-paw-inner: ( | |
$k-bounce-down: rotate(-16deg), | |
$k-bounce-up: rotate(-10deg), | |
4.5: rotate(-20deg), | |
5: rotate(0deg), | |
$k-attack-prep: rotate(-14deg), | |
$k-attack: rotate(0), | |
); | |
$kf-ear: ( | |
$k-bounce-up: rotateX(-20deg) rotate(-15deg), | |
$k-bounce-down: rotateX(20deg) rotate(-5deg), | |
(4.7,4.9,5.1,5.3): rotate(-20deg), | |
(4.8,5.0,5.2,5.6): rotate(-10deg), | |
$k-attack-prep: rotateX(20deg) rotate(-5deg), | |
($kap+0.4, $kap+0.8, $kap+1.2, $kap+1.6, $kap+2.0): rotateX(-30deg) rotate(-30deg), | |
($kap+0.6, $kap+1.0, $kap+1.4, $kap+1.8, $kap+2.2): rotateX(-20deg) rotate(-20deg), | |
); | |
$kf-tail: ( | |
all: scale(0.9), | |
$k-bounce-down: rotate(-5deg), | |
$k-bounce-up: rotate(5deg), | |
4.4: rotate(10deg), | |
(4.6, 5, 5.4): rotate(-2deg), | |
(4.8, 5.2, 5.6): rotate(4deg), | |
$k-attack-prep: rotate(-7deg), | |
($k-attack-prep + 1): rotate(15deg), | |
); | |
$kf-tail-end: ( | |
all: scale(0.9), | |
$k-bounce-down: rotate(-12deg), | |
$k-bounce-up: rotate(9deg), | |
4.4: rotate(10deg), | |
(4.6, 5, 5.4): rotate(-4deg), | |
(4.8, 5.2, 5.6): rotate(12deg), | |
$k-attack-prep: rotate(7deg), | |
($kap+0.6, $kap + 1, $kap+1.4, $kap+1.8): rotate(-10deg), | |
($kap+0.8, $kap + 1.2, $kap+1.6, $kap+2.0): rotate(2deg), | |
); | |
$kf-chest: ( | |
(0, 4, $total-kf): translateY(0), | |
4.5: rotate(-2deg) translateY(2%) , | |
5: rotate(2deg) translateY(-2%) , | |
($k-attack-prep - 1): translateY(0), | |
$k-attack-prep: translateY(2%), | |
($k-attack-prep + 1): translateY(0), | |
); | |
$kf-fur-center: ( | |
$k-bounce-down: translateY(0), | |
$k-bounce-up: translateY(2%), | |
); | |
$kf-fur-center-patch-left: ( | |
$k-bounce-down: rotate(65deg) skewX(15deg), | |
$k-bounce-up: rotate(60deg) skewX(15deg), | |
); | |
$kf-fur-center-patch-right: ( | |
$k-bounce-down: rotate(35deg) skewX(15deg), | |
$k-bounce-up: rotate(30deg) skewX(15deg), | |
); | |
$kf-fur-right: ( | |
$k-bounce-down: translateY(0), | |
$k-bounce-up: translateY(2%), | |
); | |
$kf-fur-right-patch: ( | |
$k-bounce-down: translateY(0) rotate(50deg), | |
$k-bounce-up: translateY(2%) rotate(56deg), | |
); | |
@mixin effect($name, $kf) { | |
$all: ''; | |
@keyframes #{$name} { | |
@each $intervals, $transform in $kf { | |
@each $interval in $intervals { | |
@if ($interval == 'all') { | |
$all: $transform; | |
} @else { | |
#{percentage($interval/$total-kf)} { | |
@if type-of($transform) == 'map' { | |
@each $key, $val in $transform { | |
#{$key}: $val; | |
} | |
} @else { | |
transform: unquote($all) $transform; | |
} | |
} | |
} | |
} | |
} | |
} | |
$all: ''; | |
} | |
@function a($name, $delay: 0s) { | |
@return $name $duration $delay $easing both infinite; | |
} | |
@include effect(head, $kf-head); | |
@include effect(head-shadow, $kf-head-shadow); | |
@include effect(eyes, $kf-eyes); | |
@include effect(eyelid, $kf-eyelid); | |
@include effect(nose, $kf-nose); | |
@include effect(mouth-move, $kf-mouth-move); | |
@include effect(mouth, $kf-mouth); | |
@include effect(mouth-side, $kf-mouth-side); | |
@include effect(ear, $kf-ear); | |
@include effect(tail, $kf-tail); | |
@include effect(tail-end, $kf-tail-end); | |
@include effect(chest, $kf-chest); | |
@include effect(fur-center, $kf-fur-center); | |
@include effect(fur-center-patch-left, $kf-fur-center-patch-left); | |
@include effect(fur-center-patch-right, $kf-fur-center-patch-right); | |
@include effect(fur-right, $kf-fur-right); | |
@include effect(fur-right-patch, $kf-fur-right-patch); | |
@include effect(body, $kf-body); | |
@include effect(leg, $kf-leg); | |
@include effect(leg-inner, $kf-leg-inner); | |
@include effect(paw-inner, $kf-paw-inner); | |
.eevee { | |
height: 325px; | |
width: 410px; | |
@media (max-width: 600px) { | |
transform: scale(0.8); | |
} | |
@media (max-width: 300px) { | |
transform: scale(0.5); | |
} | |
* { | |
position: absolute; | |
} | |
} | |
.body { | |
animation: a(body); | |
height: 100px; | |
position: absolute; | |
width: 125px; | |
top: 164px; | |
left: 140px; | |
background: $color-body; | |
border-top-right-radius: 30%; | |
border-bottom-right-radius: 50%; | |
border-bottom-left-radius: 70%; | |
box-shadow: | |
inset -15px 0 0 $color-body-dark; | |
} | |
.chest { | |
animation: a(chest, 0.05s); | |
height: 110%; | |
width: 130px; | |
left: -30px; | |
z-index: 1; | |
} | |
.fur { | |
height: 80px; | |
width: 80px; | |
top: 0; | |
border-radius: 50%; | |
background: linear-gradient(to top, | |
$color-fur, | |
white 40%, | |
white 50%, | |
$color-fur 75% | |
); | |
&:first-child { | |
animation: a(fur-center, 0.1s); | |
height: 110px; | |
width: 110px; | |
left: calc(50% - 55px); | |
z-index: 1; | |
box-shadow: | |
inset 0 0 0 2px rgba(black, 0.2), | |
3px 0 15px rgba(black, 0.2); | |
> .patch { | |
height: 50%; | |
width: 50%; | |
left: 50% - 25%; | |
transform-style: none; | |
bottom: 8%; | |
&:before { | |
animation: a(fur-center-patch-left); | |
left: 25%; | |
top: 0; | |
transform: rotate(65deg) skewX(15deg); | |
box-shadow: | |
2px 0 $color-fur-edge; | |
background: linear-gradient(-45deg, | |
$color-fur-edge, | |
$color-fur 9%, | |
transparent 20%); | |
border-top-right-radius: 60%; | |
border-bottom-right-radius: 8%; | |
} | |
&:after { | |
animation: a(fur-center-patch-right, 0.07s); | |
left: initial; | |
right: 25%; | |
top: 0; | |
transform: rotate(35deg) skewX(15deg); | |
box-shadow: | |
0 3px $color-fur-edge; | |
background: linear-gradient(-37deg, | |
$color-fur-edge, | |
$color-fur 9%, | |
transparent 20%); | |
border-top-right-radius: 0; | |
border-bottom-right-radius: 0; | |
border-bottom-left-radius: 60%; | |
border-bottom-right-radius: 8%; | |
} | |
} | |
} | |
&:nth-child(2) { | |
left: -3px; | |
} | |
&:nth-child(3) { | |
animation: a(fur-right, 0.15s); | |
right: -20px; | |
} | |
> .patch { | |
&:before, &:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
border-bottom-left-radius: 100%; | |
} | |
&:before { | |
background: linear-gradient(-30deg, | |
$color-fur-edge, | |
$color-fur 6%, | |
white 55%, | |
transparent | |
); | |
} | |
&:after { | |
background: linear-gradient(-30deg, | |
$color-fur-edge, | |
$color-fur 6%, | |
white 55%, | |
transparent | |
); | |
} | |
} | |
&:not(:first-child) > .patch { | |
height: 35%; | |
width: 35%; | |
bottom: 10%; | |
left: 30%; | |
&:before, &:after { | |
animation: a(fur-right-patch); | |
top: -15%; | |
left: 110%; | |
transform-origin: top left; | |
box-shadow: | |
2px 0 $color-fur-edge; | |
border-top-right-radius: 75%; | |
border-bottom-right-radius: 10%; | |
} | |
&:before { | |
left: 150%; | |
top: -25%; | |
} | |
&:after { | |
animation-delay: 0.1s; | |
left: 100%; | |
top: 0%; | |
} | |
} | |
} | |
.head { | |
height: 149px; | |
width: 144px; | |
top: -110px; | |
left: -35px; | |
z-index: 10; | |
animation: a(head); | |
transform-style: preserve-3d; | |
perspective: 1000px; | |
&:before { | |
content: ''; | |
position: absolute; | |
display: block; | |
height: 100%; | |
width: 100%; | |
top: 0; | |
left: 0; | |
} | |
&:after { | |
content: ''; | |
position: absolute; | |
display: block; | |
height: 20%; | |
width: 20%; | |
background: green; | |
transform: skewX(30deg) rotate(40deg); | |
left: 50%; | |
top: -2%; | |
background: $color-body; | |
box-shadow: | |
-15px 8px #ca9d65, | |
-25px 22px #cca069, | |
-35px 50px #cda36f | |
; | |
z-index: -1; | |
} | |
} | |
.face { | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
background: linear-gradient(to top left, | |
$color-body-dark, | |
$color-body 60%, | |
$color-body 70%, | |
lighten($color-body, 15%) 100% | |
); | |
&, &:before { | |
border-top-left-radius: 40% 50%; | |
border-top-right-radius: 40% 50%; | |
border-bottom-left-radius: 50% 30%; | |
border-bottom-right-radius: 50% 30%; | |
} | |
&:before { | |
animation: a(head-shadow); | |
content: ''; | |
display: block; | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
background: radial-gradient(farthest-side, | |
rgba(black, 0.6), | |
transparent | |
); | |
z-index: -1; | |
top: 20%; | |
left: 0%; | |
} | |
} | |
.ears { | |
width: 100%; | |
height: 54px; | |
z-index: -2; | |
} | |
.ear { | |
width: 160px; | |
height: 70px; | |
left: 50%; | |
bottom: 10%; | |
transform-origin: bottom left; | |
transform: translateX(40px); | |
&:before, &:after { | |
animation: a(ear, 0.1s); | |
animation-delay: 50ms; | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
transform: skewX(-25deg) skewY(5deg); | |
background: radial-gradient(farthest-side, $color-ear, darken($color-ear, 4%)); | |
transform-origin: bottom left; | |
border: 12px solid $color-eye; | |
border-top-left-radius: 100%; | |
border-bottom-right-radius: 100%; | |
} | |
&:after { | |
border: 8px solid $color-body-dark; | |
background: transparent; | |
} | |
+ .ear { | |
transform: translateX(-40px) rotateY(180deg); | |
} | |
> .lobe { | |
height: 20%; | |
width: 20%; | |
background: $color-body-dark; | |
bottom: 25%; | |
left: -5%; | |
transform: skewX(-50deg); | |
border-top-right-radius: 15%; | |
box-shadow: 9px 6px 0 $color-body-dark; | |
} | |
} | |
.eyes { | |
width: 77%; | |
height: 33%; | |
left: 5%; | |
top: 35%; | |
animation: a(eyes); | |
} | |
.eye { | |
height: 100%; | |
width: 28%; | |
border-top-left-radius: 50% 65%; | |
border-top-right-radius: 50% 65%; | |
border-bottom-left-radius: 50% 35%; | |
border-bottom-right-radius: 50% 35%; | |
background-color: $color-eye; | |
box-shadow: | |
inset 0 0 0 3px $color-eye; | |
background-image: | |
radial-gradient(ellipse 5px 10px at 50% 65%, | |
$color-eye 0%, | |
$color-eye 99%, | |
transparent 100%), | |
radial-gradient(ellipse 10px 20px at 50% 90%, | |
#955D27 0%, | |
#955D27 99%, | |
transparent 100%), | |
radial-gradient(ellipse 4px 6px at 55% 20%, | |
white 0%, | |
white 99%, | |
transparent 100%) | |
; | |
&:last-child { | |
right: 10%; | |
transform: rotateY(180deg); | |
// &:before { | |
// border-left: 3px solid $color-eye; | |
// border-right: 1px solid transparent; | |
// border-top: 1px solid transparent; | |
// border-bottom: 1px solid transparent; | |
// transform: rotate(38deg); | |
// left: 2px; | |
// } | |
} | |
&:before { | |
content: ''; | |
display: block; | |
position: absolute; | |
height: 30%; | |
width: 30%; | |
background: transparent; | |
border-radius: 50%; | |
border-right: 3px solid $color-eye; | |
border-left: 1px solid transparent; | |
border-top: 1px solid transparent; | |
border-bottom: 1px solid transparent; | |
z-index: -1; | |
transform: rotate(-38deg); | |
top: -4px; | |
left: initial; | |
right: 2px; | |
opacity: 0.6; | |
z-index: 1; | |
} | |
> .eyelid { | |
height: 102%; | |
width: 102%; | |
left: -1%; | |
top: -1%; | |
overflow: hidden; | |
&:before { | |
animation: a(eyelid); | |
content: ''; | |
position: absolute; | |
display: block; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
background: $color-body; | |
border-bottom: 3px solid $color-eye; | |
transform-origin: center bottom; | |
transform: translateY(-100%); | |
border-radius: 50% 50% 15% 15%; | |
} | |
} | |
} | |
.mouth { | |
animation: a(mouth), a(mouth-move); | |
animation-timing-function: step-end, $easing; | |
animation-fill-mode: none; | |
width: 12%; | |
height: 6%; | |
bottom: 13%; | |
left: 33%; | |
border-radius: 50%; | |
box-shadow: 0 -2px $color-eye; | |
&:before, &:after { | |
animation: a(mouth-side); | |
animation-timing-function: step-end; | |
content: ''; | |
display: block; | |
position: absolute; | |
width: 60%; | |
height: 100%; | |
border-radius: 50%; | |
bottom: 53%; | |
border-bottom: 2px solid $color-eye; | |
} | |
&:before { | |
right: 87%; | |
} | |
&:after { | |
left: 87%; | |
} | |
} | |
.nose { | |
animation: a(nose); | |
width: 6%; | |
height: 4%; | |
background: $color-eye; | |
border-bottom-left-radius: 50% 65%; | |
border-bottom-right-radius: 50% 65%; | |
border-top-left-radius: 50% 35%; | |
border-top-right-radius: 50% 35%; | |
bottom: 26%; | |
left: 35%; | |
} | |
.tail { | |
height: 120px; | |
width: 120px; | |
z-index: -1; | |
animation: a(tail); | |
&:before, &:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
&:after { | |
background: $color-body; | |
border-radius: 50%; | |
transform: rotate(-135deg); | |
} | |
.body > & { | |
z-index: -2; | |
right: -40px; | |
top: -70px; | |
&:after { | |
background: linear-gradient(to bottom right, | |
$color-body-dark, | |
$color-body-dark 20%, | |
$color-body, | |
$color-body); | |
} | |
} | |
.tail { | |
top: -35px; | |
transform-origin: center bottom; | |
transform: scale(0.85); | |
} | |
> .tail .tail { | |
z-index: 1 | |
} | |
&.-end { | |
top: -60px; | |
&:after { | |
background: $color-fur; | |
background: linear-gradient(to bottom right, $color-fur, white); | |
// box-shadow: 0 0 0 6px $color-fur; | |
border-radius: initial; | |
border-bottom-left-radius: 100% 50%; | |
border-top-right-radius: 50% 100%; | |
border-top-left-radius: 50%; | |
} | |
&:before { | |
content: ''; | |
display: block; | |
position: absolute; | |
background: $color-body; | |
height: 40%; | |
width: 40%; | |
z-index: 1; | |
border-radius: 50% 50% 0 0; | |
top: initial; | |
bottom: -15%; | |
left: 30%; | |
box-shadow: | |
-20px -5px $color-body, | |
20px -5px $color-body; | |
} | |
} | |
> .tail > .tail * { | |
animation: a(tail-end); | |
} | |
} | |
.legs { | |
animation: a(legs); | |
top: 70%; | |
width: 100%; | |
height: 100%; | |
} | |
@mixin bend-leg($deg) { | |
> .inner-leg { | |
transform: skewX($deg); | |
&:before { | |
transform: skewX(-$deg); | |
} | |
} | |
} | |
.leg { | |
top: 0; | |
background: linear-gradient(to left, $color-body-dark, $color-body, $color-body-light); | |
transform-origin: center top; | |
animation: a(leg); | |
&, > .inner-leg { | |
height: 40px; | |
width: 30px; | |
border-radius: 35%; | |
} | |
&:before, &:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
} | |
> .inner-leg { | |
top: 50%; | |
transform-origin: center 10%; | |
animation: a(leg-inner); | |
&:before { | |
animation: a(paw-inner); | |
} | |
} | |
&:nth-child(1) { | |
left: 20px; | |
top: -2px; | |
} | |
&:nth-child(2) { | |
left: 70px; | |
~ * { | |
z-index: -1; | |
&, & > .inner-leg, & > .inner-leg:before { | |
animation-delay: 0.07s; | |
} | |
} | |
} | |
&:nth-child(3) { | |
left: 35px; | |
top: -10px; | |
} | |
&:nth-child(4) { | |
left: 90px; | |
top: -10px; | |
} | |
} | |
.inner-leg { | |
background: linear-gradient(to left, $color-body-dark, $color-body, $color-body-light); | |
&:before { | |
content: ''; | |
display: block; | |
position: absolute; | |
bottom: -10%; | |
width: 105%; | |
height: 50%; | |
border-top-left-radius: 40% 40%; | |
border-top-right-radius: 40% 40%; | |
border-bottom-left-radius: 20%; | |
border-bottom-right-radius: 20%; | |
background-image: | |
linear-gradient( | |
to bottom, | |
$color-body 0%, | |
$color-body 50%, | |
transparent 100% | |
), | |
linear-gradient( | |
to right, | |
transparent 0%, | |
transparent 25%, | |
rgba(black, 0.5) 26%, | |
rgba(black, 0.5) 35%, | |
transparent 36%, | |
transparent 65%, | |
rgba(black, 0.5) 66%, | |
rgba(black, 0.5) 75%, | |
transparent 76% | |
), | |
linear-gradient(to top, | |
$color-body-dark, | |
$color-body, | |
$color-body-light | |
); | |
} | |
} | |
html body { | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
min-height: 100%; | |
height: auto; | |
align-items: center; | |
$light: rgba(white, 0.6); | |
$lighter: rgba(white, 0.3); | |
background-image: | |
repeating-linear-gradient(120deg, | |
$light, | |
$light 1px, | |
transparent 1px, | |
transparent 30px, | |
$lighter 30px, | |
$lighter 31px, | |
transparent 31px, | |
transparent 60px | |
), | |
repeating-linear-gradient(60deg, | |
$light, | |
$light 1px, | |
transparent 1px, | |
transparent 30px, | |
$lighter 30px, | |
$lighter 31px, | |
transparent 31px, | |
transparent 60px | |
), | |
repeating-linear-gradient(to bottom, | |
$lighter, | |
$lighter 1px, | |
transparent 1px, | |
transparent 30px); | |
background-size: 70px 120px; | |
@media (max-width: 600px) { | |
flex-direction: column; | |
.dex { | |
max-width: 100%; | |
} | |
} | |
} | |
.dex { | |
font-family: Lato, sans-serif; | |
max-width: 40%; | |
font-size: 14px; | |
color: white; | |
font-weight: 300; | |
padding: 1rem 2rem; | |
} | |
.heading { | |
font-size: 24px; | |
text-transform: uppercase; | |
margin-bottom: 14px; | |
letter-spacing: 0.25ch; | |
> span { | |
font-weight: 100; | |
margin-right: 0.5ch; | |
} | |
> strong { | |
font-size: 28px; | |
font-weight: 300; | |
} | |
} | |
.pokeball { | |
display: inline-block; | |
width: 1rem; | |
height: 1rem; | |
background: radial-gradient(0.4rem, white, white 50%, transparent 50%); | |
margin-right: 1rem; | |
&:before, &:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
bottom: -0.063rem; | |
left: 0; | |
height: 50%; | |
width: 100%; | |
border-radius: 0 0 1rem 1rem; | |
box-shadow: | |
inset 0 -0.09rem 0 0.09rem white, | |
inset 0.09rem -0.09rem 0 0.09rem white, | |
inset -0.09rem -0.09rem 0 0.09rem white | |
; | |
} | |
&:after { | |
transform-origin: top center; | |
transform: rotateX(180deg); | |
bottom: 0.063rem; | |
} | |
} | |
.info { | |
display: inline-block; | |
margin-right: 1rem; | |
margin-bottom: 14px; | |
} | |
.subheading { | |
font-size: 18px; | |
line-height: 28px; | |
} | |
p { | |
line-height: 18px; | |
margin: 0; | |
margin-bottom: 1rem; | |
} | |
a { | |
transition: opacity 0.3s $easing; | |
&, &:active, &:visited { | |
color: white; | |
} | |
&:hover { | |
opacity: 0.8; | |
} | |
} | |
html { | |
background: radial-gradient(50vmin 50vmin, #FEB4FF, #A3A3EC); | |
background-position: -20vw center; | |
background-repeat: no-repeat; | |
background-color: #a3a3ec; | |
@media (max-width: 600px) { | |
background-position: center -20vw; | |
} | |
@media (max-width: 300px) { | |
background-position: center -30vw; | |
} | |
} | |
html, body { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
font-size: 14px; | |
} | |
*, *:before, *:after { | |
box-sizing: border-box; | |
position: relative; | |
} |