<div id="wrapper">
<blockquote>When Chuck Norris does a pushup,<br />he isn't lifting himself up,<br />he's pushing the Earth down.</blockquote>
<div id="scene">
<div class="mirror"></div>
<div class="desk">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
<div class="vase">
<div class="stem stem-1"></div>
<div class="stem stem-2"></div>
</div>
<div class="cabinet">
<div class="shelf shelf-1">
<div class="book book-1"></div>
<div class="book book-2"></div>
<div class="book book-3"></div>
<div class="book book-4"></div>
</div>
<div class="shelf shelf-2">
<div class="book book-1"></div>
<div class="book book-2"></div>
<div class="book book-3"></div>
<div class="book book-4"></div>
<div class="book book-5"></div>
</div>
<div class="drawer drawer-1"></div>
<div class="drawer drawer-2"></div>
</div>
</div>
<div id="chuck-norris">
<div class="hat"></div>
<div class="face"></div>
<div class="eye"></div>
<div class="hair"></div>
<div class="beard"></div>
<div class="shirt"></div>
<div class="arm"></div>
<div class="pants"></div>
<div class="shoes"></div>
</div>
</div>
$background: #9c6da4;
$scene: #905d9b;
$hat: #6a3d73;
$hat-dark: #4d2b58;
$face: #c2c8d8;
$hair: #6a3c75;
$eye: #482d4f;
$collar: #4f2b56;
$shirt: #603668;
$shirt-line: #864b92;
$sleeve: #6a3d73;
$belt: #4d2957;
$pants: #ba85cb;
$pants-line: #a661bc;
$shoes: #4e2c55;
$animation: 2s ease-in-out alternate infinite;
$animation-blink: 4s 1s linear infinite;
$pushup-angle: -7deg;
* {
&,
&:before,
&:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
html {
height: 100%;
font-size: 1px;
}
body {
display: flex;
background: $background;
align-items: center;
justify-content: center;
min-height: 100%;
> * {
vertical-align: middle;
}
}
#wrapper {
position: relative;
display: inline-block;
width: 800rem;
height: 415rem;
margin: 100rem 0;
}
blockquote {
position: absolute;
top: -100rem;
width: 100%;
text-align: center;
color: darken($background, 30%);
font-size: 16rem;
font-weight: bold;
font-style: italic;
line-height: 20rem;
text-shadow: 0 1px 0 lighten($background, 8%);
&:before {
content: open-quote;
}
&:after {
content: close-quote;
}
}
#scene {
position: relative;
display: inline-block;
width: 800rem;
height: 415rem;
border-bottom: solid 10rem $scene;
animation: scene $animation;
transform-origin: 660rem 415rem;
.mirror {
position: absolute;
display: block;
top: 0;
left: 130rem;
width: 180rem;
height: 180rem;
border: solid 22rem $scene;
border-radius: 5rem;
&:before,
&:after {
content: "";
position: absolute;
background: $scene;
width: 2rem;
transform: rotateZ(45deg);
border-radius: 2rem;
}
&:before {
top: 5rem;
left: 35rem;
height: 50rem;
box-shadow: 95rem 10rem 0 0 $scene,
105rem 5rem 0 0 $scene;
}
&:after {
top: 15rem;
left: 55rem;
height: 100rem;
box-shadow: 10rem 10rem 0 0 $scene;
}
}
.desk {
position: absolute;
background: $scene;
top: 260rem;
left: 58rem;
width: 330rem;
height: 110rem;
border: solid 20rem $scene;
box-shadow: inset 0 0 0 4rem $background;
&:before,
&:after {
content: "";
position: absolute;
background: $scene;
}
&:before {
top: -42rem;
left: -33rem;
width: 356rem;
height: 18rem;
border-radius: 9rem;
}
&:after {
top: 94rem;
left: -9rem;
width: 18rem;
height: 28rem;
border-radius: 0 0 9rem 9rem;
box-shadow: 290rem 0 0 0 $scene;
}
.item {
position: absolute;
background: $scene;
&.item-1 {
top: -91rem;
left: -10rem;
width: 36rem;
height: 45rem;
&:before {
content: "";
position: absolute;
background: $scene;
top: -24rem;
left: 10rem;
width: 16rem;
height: 20rem;
}
}
&.item-2 {
top: -66rem;
left: 205rem;
width: 36rem;
height: 20rem;
}
&.item-3 {
top: -91rem;
left: 255rem;
width: 34rem;
height: 45rem;
}
}
}
.vase {
position: absolute;
background: $scene;
top: 275rem;
left: 420rem;
width: 126rem;
height: 126rem;
border-top-left-radius: 63rem 50rem;
border-top-right-radius: 63rem 50rem;
border-bottom-left-radius: 40rem 76rem;
border-bottom-right-radius: 40rem 76rem;
&:before,
&:after {
content: "";
position: absolute;
background: $scene;
}
&:before {
top: -8rem;
left: 49rem;
width: 28rem;
height: 16rem;
}
&:after {
top: -20rem;
left: 43rem;
width: 40rem;
height: 10rem;
border-radius: 5rem;
}
.stem {
position: absolute;
&:before {
content: "";
position: absolute;
background: $scene;
border-radius: 50%;
}
&.stem-1 {
top: -210rem;
left: 3rem;
width: 60rem;
height: 190rem;
border-top: solid 2rem $scene;
border-right: solid 4rem $scene;
border-top-right-radius: 60rem 190rem;
&:before {
top: 10rem;
left: 5rem;
width: 8rem;
height: 8rem;
box-shadow: 10rem 16rem 0 2rem $scene,
24rem -5rem 0 -1rem $scene,
19rem 36rem 0 0 $scene,
36rem 12rem 0 1rem $scene,
24rem 56rem 0 1rem $scene,
40rem 34rem 0 1rem $scene,
29rem 74rem 0 -1rem $scene;
}
}
&.stem-2 {
top: -160rem;
left: 64rem;
width: 30rem;
height: 140rem;
border-top: solid 2rem $scene;
border-left: solid 6rem $scene;
border-top-left-radius: 30rem 140rem;
&:before {
top: 5rem;
left: 0;
width: 8rem;
height: 8rem;
box-shadow: 18rem 12rem 0 2rem $scene,
-6rem 18rem 0 0 $scene,
12rem 32rem 0 0 $scene,
-8rem 36rem 0 -1rem $scene,
8rem 48rem 0 0 $scene,
8rem 68rem 0 2rem $scene,
4rem 88rem 0 -1rem $scene;
}
}
}
}
.cabinet {
position: absolute;
top: 0;
left: 575rem;
width: 188rem;
height: 401rem;
border: solid 12rem $scene;
border-bottom: none;
.book {
position: absolute;
background: $scene;
transform-origin: bottom left;
}
.shelf {
position: absolute;
left: 0;
width: 164rem;
height: 88rem;
border-bottom: solid 12rem $scene;
&.shelf-1 {
top: 0;
.book-1 {
top: 7rem;
left: 14rem;
width: 16rem;
height: 65rem;
}
.book-2 {
top: 7rem;
left: 34rem;
width: 23rem;
height: 65rem;
}
.book-3 {
top: 7rem;
left: 94rem;
width: 14rem;
height: 65rem;
transform: rotateZ(-30deg);
}
.book-4 {
top: 7rem;
left: 152rem;
width: 12rem;
height: 65rem;
transform: rotateZ(-60deg);
}
}
&.shelf-2 {
top: 88rem;
.book-1 {
top: 7rem;
left: 26rem;
width: 8rem;
height: 65rem;
transform: rotateZ(-20deg);
}
.book-2 {
top: 7rem;
left: 38rem;
width: 8rem;
height: 65rem;
transform: rotateZ(-20deg);
}
.book-3 {
top: 32rem;
left: 110rem;
width: 14rem;
height: 40rem;
}
.book-4 {
top: 7rem;
left: 128rem;
width: 10rem;
height: 65rem;
}
.book-5 {
top: 7rem;
left: 142rem;
width: 15rem;
height: 65rem;
}
}
}
.drawer {
position: absolute;
left: 0;
width: 164rem;
height: 88rem;
border-bottom: solid 12rem $scene;
&:before,
&:after {
content: "";
position: absolute;
}
&:before {
top: 11rem;
left: 11rem;
width: 142rem;
height: 54rem;
border: solid 2rem $scene;
}
&:after {
background: $scene;
top: 33rem;
left: 60rem;
width: 40rem;
height: 10rem;
}
&.drawer-1 {
top: 176rem;
}
&.drawer-2 {
top: 264rem;
}
}
}
}
#chuck-norris {
position: absolute;
z-index: 1;
top: 240rem;
left: 140rem;
transform: rotateZ(6deg);
.hat {
position: absolute;
background: $hat;
width: 55rem;
height: 100rem;
border-top-left-radius: 55rem 25rem;
border-bottom-left-radius: 55rem 30rem;
&:before {
content: "";
position: absolute;
background: $hat-dark;
top: -38rem;
left: 35rem;
width: 55rem;
height: 190rem;
border-top-left-radius: 55rem 50rem;
border-bottom-left-radius: 55rem 140rem;
}
}
.face {
position: absolute;
top: 25rem;
left: 90rem;
width: 36rem;
height: 92rem;
border-style: solid;
border-color: $face $face transparent transparent;
border-width: 79rem 36rem 13rem 0;
&:before,
&:after {
content: "";
position: absolute;
}
&:before {
background: $face;
top: -79rem;
left: 36rem;
width: 16rem;
height: 92rem;
border-bottom-right-radius: 14rem;
}
&:after {
background: $face;
top: -92rem;
left: 8rem;
width: 26rem;
height: 13rem;
border-radius: 13rem 13rem 0 0;
}
}
.eye {
position: absolute;
background: $eye;
top: 75rem;
left: 100rem;
width: 12rem;
height: 12rem;
border-radius: 12rem;
animation: eye $animation-blink;
}
.hair {
position: absolute;
background: $hair;
z-index: -1;
top: -15rem;
left: 90rem;
width: 52rem;
height: 40rem;
border-top-right-radius: 12rem;
}
.beard {
position: absolute;
background: $hair;
top: 2rem;
left: 142rem;
width: 75rem;
height: 100rem;
border-radius: 0 50rem 50rem 0;
&:before,
&:after {
content: "";
position: absolute;
background: $face;
}
&:before {
top: 35rem;
left: 70rem;
width: 17rem;
height: 32rem;
z-index: -1;
}
&:after {
top: 66rem;
left: 10rem;
width: 14rem;
height: 34rem;
border-top-right-radius: 14rem;
}
}
.shirt {
position: absolute;
background: $shirt;
top: -5rem;
left: 235rem;
width: 47rem;
height: 120rem;
border-radius: 60rem 0 0 60rem;
box-shadow: inset -6rem 0 0 0 $shirt,
inset -8rem 0 0 0 $shirt-line,
inset -12rem 0 0 0 $shirt,
inset -14rem 0 0 0 $shirt-line,
inset -18rem 0 0 0 $shirt,
inset -20rem 0 0 0 $shirt-line;
&:before,
&:after {
content: "";
position: absolute;
}
&:before {
top: 0;
left: 47rem;
width: 88rem;
height: 120rem;
border-style: solid;
border-color: transparent transparent transparent $shirt;
border-width: 39rem 0 39rem 88rem;
}
&:after {
background: $collar;
z-index: -1;
top: 36rem;
left: -10rem;
width: 15rem;
height: 45rem;
border-radius: 8rem 0 0 8rem;
}
}
.arm {
position: absolute;
background: $sleeve;
top: 30rem;
left: 250rem;
width: 75rem;
height: 36rem;
border-radius: 18rem;
transform: rotateZ(10deg);
transform-origin: left center;
animation: arm-top $animation;
&:before,
&:after {
content: "";
position: absolute;
}
&:before {
background: $sleeve;
top: 0;
right: -10rem;
width: 36rem;
height: 90rem;
border-top-left-radius: 18rem 50rem;
border-top-right-radius: 18rem 50rem;
border-bottom-left-radius: 18rem;
border-bottom-right-radius: 18rem;
transform: rotateZ(15deg);
transform-origin: top center;
box-shadow: 0 10rem 0 0 $face;
animation: arm-bottom $animation;
}
&:after {
background: $face;
z-index: -1;
right: 10rem;
bottom: -60rem;
width: 75rem;
height: 20rem;
border-top-left-radius: 40rem 16rem;
border-bottom-right-radius: 10rem;
transform: rotateZ(-15deg);
transform-origin: right center;
animation: hand $animation;
}
}
.pants {
position: absolute;
background: $pants;
top: 34rem;
left: 370rem;
width: 190rem;
height: 41rem;
border-left: solid 14rem $belt;
border-right: solid 32rem $shoes;
&:before {
content: "";
position: absolute;
top: 20rem;
left: 2rem;
width: 140rem;
height: 2rem;
border-top: dashed 2rem $pants-line;
}
}
.shoes {
position: absolute;
background: $shoes;
top: 75rem;
left: 490rem;
width: 70rem;
height: 35rem;
border-top-left-radius: 40rem 33rem;
transform: rotateZ(-6deg);
transform-origin: top center;
animation: shoes $animation;
}
}
@keyframes scene {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ($pushup-angle);
}
}
@keyframes eye {
0% {
transform: scale(1, 1);
}
3% {
transform: scale(0.2, 1);
}
6% {
transform: scale(1, 1);
}
9% {
transform: scale(0.2, 1);
}
12% {
transform: scale(1, 1);
}
}
@keyframes arm-top {
0% {
transform: rotateZ(10deg);
}
100% {
transform: rotateZ(45deg + $pushup-angle);
}
}
@keyframes arm-bottom {
0% {
transform: rotateZ(15deg);
}
100% {
transform: rotateZ(-5deg + $pushup-angle);
}
}
@keyframes hand {
0% {
transform: rotateZ(-15deg);
}
100% {
right: -28rem;
bottom: -46rem;
transform: rotateZ(-45deg + $pushup-angle);
}
}
@keyframes shoes {
0% {
transform: rotateZ(-6deg);
}
100% {
transform: rotateZ(-6deg + $pushup-angle);
}
}
View Compiled
/*
Chuck Norris's kickass pushups!
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in
Inspired by this 9gag post: http://9gag.com/gag/aA1EB32
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.