afc163
7 years ago
2 changed files with 0 additions and 161 deletions
@ -1,160 +0,0 @@ |
|||
.santa { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-left: -8px; |
|||
transform: scale(0.4); |
|||
} |
|||
|
|||
.santa-body { |
|||
font-size: 60px; |
|||
color: #f91047; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 1em; |
|||
height: 1em; |
|||
background-color: currentColor; |
|||
box-shadow: inset 0 -0.25em rgba(0, 0, 0, 0.1); |
|||
border-radius: 50%; |
|||
transform-origin: center bottom; |
|||
animation: balance alternate infinite 2s ease-in-out; |
|||
} |
|||
|
|||
.santa-head { |
|||
font-size: 0.4em; |
|||
width: 1em; |
|||
height: 1.9em; |
|||
background-color: white; |
|||
border-radius: 0.5em; |
|||
transform: translateY(-1em); |
|||
position: relative; |
|||
} |
|||
|
|||
.santa-head::before { |
|||
content: ''; |
|||
width: 1em; |
|||
height: 0.375em; |
|||
display: block; |
|||
background-color: #ff9876; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0.65em; |
|||
} |
|||
|
|||
.santa-ear { |
|||
background-color: #fc8363; |
|||
width: 0.1em; |
|||
height: 0.3em; |
|||
position: absolute; |
|||
top: 0.75em; |
|||
} |
|||
|
|||
.santa-ear:nth-of-type(1) { |
|||
border-radius: 0.05em 0 0 0.05em; |
|||
left: -0.1em; |
|||
} |
|||
|
|||
.santa-ear:nth-of-type(2) { |
|||
border-radius: 0 0.05em 0.05em 0; |
|||
right: -0.1em; |
|||
} |
|||
|
|||
.santa-hat { |
|||
content: ''; |
|||
width: 1em; |
|||
height: 0.15em; |
|||
position: absolute; |
|||
transform: scale(1.1); |
|||
top: 0.5em; |
|||
left: 0; |
|||
background-color: white; |
|||
} |
|||
|
|||
.santa-hat::before { |
|||
content: ''; |
|||
display: block; |
|||
width: 1em; |
|||
height: 0.5em; |
|||
background: #f91047; |
|||
border-radius: 0.5em 0.5em 0 0; |
|||
z-index: 2; |
|||
position: absolute; |
|||
top: -0.5em; |
|||
} |
|||
|
|||
.santa-hat::after { |
|||
/* pompom */ |
|||
content: ''; |
|||
width: 0.25em; |
|||
height: 0.25em; |
|||
display: block; |
|||
background-color: white; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
z-index: 0; |
|||
top: -0.72em; |
|||
right: 0; |
|||
box-shadow: -0.2em 0.2em 0 0.12em rgba(0, 0, 0, 0.2), -0.2em 0.2em 0 0.12em #f91047; |
|||
} |
|||
|
|||
.santa-eye { |
|||
width: 0.12em; |
|||
height: 0.12em; |
|||
background-color: black; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
top: 0.76em; |
|||
left: 0.2em; |
|||
} |
|||
|
|||
.santa-eye + .santa-eye { |
|||
left: auto; |
|||
right: 0.2em; |
|||
} |
|||
|
|||
.santa-nose { |
|||
width: 0.12em; |
|||
height: 0.22em; |
|||
background-color: #f24c4c; |
|||
border-radius: 0 0 0.12em 0.12em; |
|||
position: absolute; |
|||
top: 0.84em; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
|
|||
.santa-mouth { |
|||
width: 0.18em; |
|||
height: 0.1em; |
|||
border-bottom-right-radius: 5vw; |
|||
border-bottom-left-radius: 5vw; |
|||
margin-top: 0.3em; |
|||
background-color: black; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
animation: hohoho 4s linear forwards infinite; |
|||
} |
|||
|
|||
@keyframes hohoho { |
|||
0%, 10%, 20%, 40%, 100% { |
|||
/* smiling */ |
|||
width: 0.18em; |
|||
height: 0.1em; |
|||
border-bottom-right-radius: 1vw; |
|||
border-bottom-left-radius: 1vw; |
|||
} |
|||
|
|||
5%, 15%, 25%, 35% { |
|||
/* hohoho */ |
|||
width: 0.15em; |
|||
height: 0.2em; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
@keyframes balance { |
|||
from { transform: rotate(-6deg); } |
|||
to { transform: rotate(6deg); } |
|||
} |
Loading…
Reference in new issue