.title
h1 Santa's Reindeer
ul.socials
li
a(href="https://ivan.odintsov.me", target="_blank")
img(src="https://maxcdn.icons8.com/Android_L/PNG/24/Messaging/link-24.png", alt="Twitter icon")
li
a(href="https://twitter.com/odintsov_design", target="_blank")
img(src="https://img.icons8.com/color/48/000000/twitter.png", alt="Twitter icon")
.container
.artboard
.deer
.rocking
.head
.horns
.horn.horn-left
.line.line-one
.line
.line.line-three
.horn.horn-right
.line.line-one
.line
.line.line-three
.ears
.ear.ear-left
.ear.ear-right
.eyes
.eye.eye-left
.eye.eye-right
.nose
.body
.shadow
.hooves
.hoof-one
.line
.anim-part
.circle
.circle
.circle
.circle
.circle.circle-last
.hoof-two
.line-one
.line-two
.tail
.circle
.circle
.circle
.circle
.circle
.legs
.leg-left
.anim-part
.line
.leg-right
.anim-part
.circle
.circle
.circle
.circle
.circle
.circle
.circle
.circle
.circle.circle-last
.presents
.present.present-one
.present.present-two
.present.present-two.present-two-right
.present.present-three
.snow
- for (var i = 1; i < 100; i++)
.snowflake
.credits.
Created with <span class="love"></span> by <a href="https://codepen.io/ivanodintsov">Ivan Odintsov</a> · Original by <a href="https://dribbble.com/shots/2421804-Merry-Christmas">Artua</a>$gray: #f4f4f4
$red: #fb5d5d
$blue: #82dfe3
$blue-light: #e7eff7
$blue-dark: #69b2cb
$blue-dark-two: #495169
$brown: #91655d
$brown-two: #835f5a
$brown-light: #9c7169
$brown-light-two: #aa8275
$brown-lighten: #e7beb2
$brown-dark: #c39e9a
$brown-dark-two: #674a4a
$brown-dark-three: #835f5b
$yellow: #ffb63c
$pink: #e66
.container
background-color: white
border-radius: 4px
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
height: 300px
margin: 40px auto 50px auto
position: relative
width: 450px
.artboard
height: 100%
overflow: hidden
position: relative
width: 100%
.deer
width: 50px
margin: 0 auto
position: relative
.rocking
animation: rocking .4s ease-in-out infinite alternate-reverse
transform-origin: bottom left
position: relative
z-index: 1
.head
position: relative
width: 50px
.horns
animation: rocking .4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate-reverse
height: 55px
position: relative
top: 21px
width: 50px
.horn
position: relative
&:before
background-color: $brown
border-radius: 7px 7px 0 0
content: ''
display: block
height: 55px
position: absolute
width: 7px
z-index: 1
.line
background-color: $brown
border-radius: 7px 0 0 7px
height: 7px
width: 20px
margin-bottom: 15px
position: relative
top: 10px
&-one
width: 15px
&-three
top: -22px
width: 17px
&-left
top: -7px
transform: rotate(-25deg)
&:before
box-shadow: inset 2px 0 0 0 $brown-light
.line
box-shadow: inset 0 2px 0 0 $brown-light
right: 15px
transform: rotate(30deg)
&-one
right: 10px
&-three
box-shadow: inset 0 -2px 0 0 $brown-light
right: -3px
transform: rotate(160deg)
&-right
bottom: 55px
left: 40px
transform: rotate(25deg)
&:before
box-shadow: inset -2px 0 0 0 $brown-two
.line
box-shadow: inset 0 2px 0 0 $brown-two
right: -2px
transform: rotate(150deg)
&-three
right: 13px
transform: rotate(20deg)
.ears
position: absolute
top: 70px
.ear
background-color: $brown
border-radius: 100% 50% 50% 50%
height: 18px
position: relative
right: 20px
top: 10px
transform: rotate(30deg)
transform-origin: 100%
width: 30px
&:before
background-color: $brown-lighten
border-radius: 100% 50% 50% 50%
height: 9px
content: ''
display: block
left: 5px
position: relative
top: 5px
width: 15px
&-left
animation: ear-left 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite alternate-reverse
transform: rotate(30deg)
&-right
animation: ear-right 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) 2s infinite alternate-reverse
left: 10px
right: 0
top: -8px
transform: rotate(160deg)
.eyes
position: absolute
top: 90px
right: -5px
width: 32px
z-index: 2
.eye
background: linear-gradient(0deg, white 50%, $brown-light-two 50%)
border-radius: 15px
height: 15px
width: 15px
&:before
animation: eaves 3s infinite alternate-reverse
background-color: $brown-light-two
border-radius: 9px 9px 0 0
height: 9px
content: ''
display: block
position: relative
width: 15px
top: -1px
z-index: 1
&:after
animation: eyes 3s infinite alternate-reverse
background-color: $blue-dark-two
border-radius: 5px
height: 5px
content: ''
display: block
left: 5px
position: relative
top: -3px
transform: translate(3px, 2px)
width: 5px
&-left
float: left
&-right
float: right
.nose
background-color: $brown
border-radius: 0 7px 15px
top: 47px
height: 18px
left: 40px
position: relative
width: 20px
z-index: 2
&:before
background-color: $red
border-radius: 15px
content: ''
display: block
height: 14px
position: absolute
right: -.5px
top: -.5px
width: 16px
&:after
background-color: white
border-radius: 5px
content: ''
display: block
height: 2px
position: absolute
right: 4px
top: 2px
width: 5px
.body
background-color: $brown
border-radius: 50px 50px 0
box-shadow: inset 7px 0 0 0 $brown-light
height: 140px
position: relative
width: 50px
z-index: 1
&:before
background-color: $brown-lighten
border-radius: 20px 0 0 20px
bottom: 20px
box-shadow: inset -7px 0 0 0 $brown-dark
content: ''
display: block
height: 65px
position: absolute
right: 0
width: 20px
.hooves
position: relative
bottom: 40px
right: 34px
.hoof
&-one
animation: jump .3s ease-in-out infinite alternate-reverse
left: 10px
position: relative
top: 70px
transform: rotate(25deg)
transform-origin: 100% 50%
.line
height: 30px
border: 20px solid
border-radius: 40px
border-color: transparent transparent $brown transparent
left: 25px
width: 30px
position: relative
top: 5px
transform: rotate(-30deg)
.anim-part
position: relative
bottom: 23px
left: 81px
transform: rotate(-75deg)
transform-origin: left
.circle
animation: hoof-one .3s ease-in-out infinite alternate-reverse
background-color: $brown
height: 20px
width: 20px
border-radius: 30px
transform: translateX(3px) rotate(0deg)
&-last
border-radius: 20px 0 0 20px
transform: translateX(2px) rotate(0deg)
&:before
content: ''
display: block
border-top: 20px solid $brown-dark-two
border-left: 7px solid transparent
height: 0
left: 10px
width: 7px
position: relative
z-index: 1
&:after
background-color: $yellow
border-radius: 10px
bottom: 30px
content: ''
display: block
height: 40px
left: 19px
position: relative
width: 9px
&-two
animation: jump-two .3s ease-in-out infinite alternate-reverse
left: 55px
position: relative
top: 10px
z-index: -1
.line
&-one,
&-two
height: 10px
border: 20px solid
border-radius: 40px
border-color: transparent transparent $brown transparent
width: 10px
position: absolute
&-one
transform: rotate(-45deg)
&-two
left: 30px
transform: rotate(135deg)
.tail
background-color: $brown-light
bottom: 0
left: 4px
position: absolute
width: 20px
z-index: 0
.circle
animation: tail 2s cubic-bezier(0, 0.02, 0.9, 2) infinite
background-color: $brown-light
border-radius: 11px
height: 12px
position: relative
right: 2px
transform: rotate(-5deg)
width: 12px
.legs
position: relative
&:before
background: linear-gradient(to left, $brown 50%, $brown-light 50%)
bottom: 0
content: ''
display: block
height: 10px
left: 7px
position: absolute
width: 30px
z-index: 0
.leg
&-left,
&-right
&:before,
&:after
content: ''
display: block
position: absolute
z-index: 1
&-left
.anim-part
animation: leg-left .4s ease-out infinite alternate-reverse
position: relative
top: 1px
transform: rotate(5deg) translateX(3px)
transform-origin: right
z-index: 2
&:before,
&:after
content: ''
display: block
position: absolute
z-index: 1
&:before
height: 16px
width: 16px
border: 20px solid
border-radius: 30px
border-color: transparent $brown-dark-three transparent transparent
transform: rotate(-45deg)
top: -17px
left: 17px
.line
background-color: $brown-dark-three
height: 25px
position: absolute
width: 20px
left: 51px
top: 7px
z-index: 2
transform: skew(-9deg)
&:after
background-color: $brown-dark-three
height: 20px
left: 33px
top: -20px
width: 24px
&:after
background-color: $brown-dark-two
height: 13px
left: 48px
top: 32px
transform: skew(-8deg)
width: 20px
z-index: 2
&-right
position: relative
right: 10px
&:before
height: 30px
width: 38px
border: 20px solid
border-radius: 40px
border-color: $brown transparent transparent transparent
transform: rotate(-15deg)
z-index: 3
top: -29px
left: 21px
.anim-part
position: absolute
left: 64px
bottom: 9px
transform: rotate(43deg)
z-index: 2
.circle
animation: leg-right .4s ease-out infinite alternate-reverse
width: 20px
height: 20px
background-color: $brown
border-radius: 20px
transform: translateX(4px) rotate(4deg)
&-last
border-radius: 20px 0 0 20px
&:before
content: ''
display: block
border-bottom: 20px solid $brown-dark-two
border-right: 2px solid transparent
height: 0
left: 15px
width: 11px
position: relative
z-index: 1
.presents
top: 3px
height: 45px
margin: 0 auto
position: relative
width: 110px
&:after
animation: shadow .4s ease-out infinite alternate-reverse
background-color: $blue-light
bottom: 0
border-radius: 7px
content: ''
display: block
height: 7px
left: -22px
position: absolute
width: 170px
.present
border-radius: 4px
bottom: 3px
position: absolute
z-index: 1
&:before,
&:after
content: ''
display: block
position: relative
&:before
border-radius: 4px 4px 2px 2px
box-shadow: 0 2px 0 0 rgba(0, 0, 0, .04)
right: 1px
&-one
background-color: $red
height: 45px
right: 32px
width: 45px
z-index: 2
&:before
background-color: lighten($red, 5)
height: 12px
width: 47px
&-two
background-color: $blue
height: 30px
width: 30px
&:before
background-color: lighten($blue, 5)
height: 10px
width: 32px
&:after
background-color: $blue-dark
bottom: 10px
height: 100%
left: 7px
width: 5px
&-right
right: 5px
&-three
background-color: $yellow
height: 25px
left: 25px
margin: auto
width: 25px
z-index: 2
&:before
background-color: lighten($yellow, 5)
height: 8px
width: 27px
&:after
background-color: darken($red, 2)
bottom: 8px
height: 100%
left: 13px
width: 5px
.snowflake
background-color: #e4e4e4
border-radius: 3px
height: 3px
position: absolute
top: 0
width: 3px
z-index: 3
@for $i from 0 through 100
.snowflake:nth-child(#{$i})
animation: snow-#{$i} random(10) + 5 + s infinite
@keyframes snow-#{$i}
$x: random(450) + px
from
transform: translate($x, random(300) - 300 + px)
to
transform: translate($x, random(300) + 400 + px)
@keyframes tail
10%
transform: rotate(2deg)
20%
transform: rotate(-5deg)
@keyframes shadow
to
width: 185px
@keyframes eyes
50%
transform: translate(3px, 2px)
60%
transform: translate(0, 0)
100%
transform: translate(0, 0)
@keyframes eaves
50%
transform: translateY(0)
60%
transform: translateY(-1px)
100%
transform: translateY(-1px)
@keyframes hoof-one
to
transform: translateX(2px) rotate(5deg)
@keyframes jump
to
transform: translateY(-2px) rotate(25deg)
@keyframes jump-two
to
transform: translateY(2px)
@keyframes rocking
to
transform: rotate(-1deg)
@keyframes ear-left
85%
transform: rotate(30deg)
100%
transform: rotate(-10deg)
@keyframes ear-right
85%
transform: rotate(160deg)
100%
transform: rotate(170deg)
@keyframes leg-right
to
transform: translateX(4px) rotate(2deg)
@keyframes leg-left
0%
transform: rotate(0deg) translateX(0px)
50%
transform: rotate(5deg) translateX(3px)
// Template styles
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600)
a
font-weight: 600
color: #91a7ff
text-decoration: none
&:hover
color: #5c7cfa
text-decoration: underline
html,
body
font-family: 'Open Sans'
body
background-color: #f8f9fa
color: #adb5bd
.title
text-align: center
h1
font-size: 1.5em
margin: 100px 0 10px 0
.socials
display: block
font-size: 14px
margin: 0
padding: 0
li
display: inline
&:not(:last-child)
margin-right: .75em
a
vertical-align: middle
&:hover
img
animation: link .5s
img
width: 1.3em
.credits
font-size: .8em
text-align: center
.love
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/heart-smil.svg)
display: inline-block
height: 16px
vertical-align: middle
width: 16px
.container
background-color: white
border-radius: 4px
box-shadow: 0 1px 3px #dee2e6
height: 300px
margin: 40px auto 50px auto
position: relative
width: 450px
.artboard
height: 100%
overflow: hidden
position: relative
width: 100%
@keyframes link
25%
transform: rotate(10deg)
50%
transform: rotate(-10deg)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.