<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Londrina+Outline" rel='stylesheet' type='text/css' />
<div class="cd-wrapper">
<div class="cd-outer-top-left">
<div class="cd-inner-top-left"></div>
</div>
<div class="cd-outer-top-right">
<div class="cd-inner-top-right"></div>
</div>
<div class="cd-outer-btm-left">
<div class="cd-inner-btm-left"></div>
</div>
<div class="cd-outer-btm-right">
<div class="cd-inner-btm-right"></div>
</div>
<div class="cd-pointer"></div>
<div class="cd-number-wrapper">
<span class="cd-number-five">5</span>
<span class="cd-number-four">4</span>
<span class="cd-number-three">3</span>
<span class="cd-number-two">2</span>
<span class="cd-number-one">1</span>
</div>
@charset "utf-8";
body {
background-color: #09f;
}
.cd-wrapper {
background-color: #0099ff;
width: 350px;
height: 350px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -175px;
}
.cd-outer-top-left {
position: absolute;
width: 173px;
height: 173px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
top: 0;
left: 0;
}
.cd-outer-top-right {
position: absolute;
width: 173px;
height: 173px;
top: 0;
right: 0;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
.cd-outer-btm-left {
position: absolute;
width: 173px;
height: 173px;
bottom: 0;
left: 0;
border-right: 2px solid #ffffff;
border-top: 2px solid #ffffff;
}
.cd-outer-btm-right {
position: absolute;
width: 173px;
height: 173px;
float: right;
bottom: 0;
right: 0;
border-left: 2px solid #ffffff;
border-top: 2px solid #ffffff;
}
.cd-inner-top-left {
background-color: #ff6600;
position: absolute;
width: 140px;
height: 140px;
bottom: 0;
right: 0;
border-top-left-radius: 180px;
}
.cd-inner-top-right {
background-color: #009900;
position: absolute;
width: 140px;
height: 140px;
bottom: 0;
left: 0;
border-top-right-radius: 180px;
}
.cd-inner-btm-left {
background-color: #005198;
position: absolute;
width: 140px;
height: 140px;
top: 0;
right: 0;
border-bottom-left-radius: 180px;
}
.cd-inner-btm-right {
background-color: #ffcc00;
position: absolute;
width: 140px;
height: 140px;
top: 0;
left: 0;
border-bottom-right-radius: 180px;
}
.cd-pointer {
position: absolute;
left: 50%;
top: 30px;
margin-left: -11px;
background-image:url(http://www.freedomknot.com/img/pointer.png);
width: 22px;
height: 156px;
-webkit-animation: cd-pointer-spin 1.2s linear 0s 5 normal;
-moz-animation: cd-pointer-spin 1.2s linear 0s 5 normal;
-o-animation: cd-pointer-spin 1.2s linear 0s 5 normal;
-ms-animation: cd-pointer-spin 1.2s linear 0s 5 normal;
animation: cd-pointer-spin 1.2s linear 0s 5 normal;
}
@-webkit-keyframes cd-pointer-spin {
from {-webkit-transform: rotate(0deg); -webkit-transform-origin: 50% 93%;}
to {-webkit-transform: rotate(360deg); -webkit-transform-origin: 50% 93%;}}
@-moz-keyframes cd-pointer-spin {
from {-moz-transform: rotate(0deg); -moz-transform-origin: 50% 93%;}
to {-moz-transform: rotate(360deg); -moz-transform-origin: 50% 93%;}}
@-o-keyframes cd-pointer-spin {
from {-o-transform: rotate(0deg); -o-transform-origin: 50% 93%;}
to {-o-transform: rotate(360deg); -o-transform-origin: 50% 93%;}}
@-ms-keyframes cd-pointer-spin {
from {-ms-transform: rotate(0deg); -ms-transform-origin: 50% 93%;}
to {-ms-transform: rotate(360deg); -ms-transform-origin: 50% 93%;}}
@keyframes cd-pointer-spin {
from {transform: rotate(0deg); transform-origin: 50% 93%;}
to {transform: rotate(360deg); transform-origin: 50% 93%;}}
.cd-number-wrapper {
width: 80px;
height: 189px;
top: 50%;
margin: 80px auto 0 auto;
font-size: 10em;
font-family: 'Londrina Outline'; /* Bowlby One SC */
}
.cd-number-five {
position: absolute;
opacity: 0;
margin: 0 auto 0 auto;
-webkit-animation: cd-number-five-anim 1.2s ease 0s 1 normal;
-moz-animation: cd-number-five-anim 1.2s ease 0s 1 normal;
-ms-animation: cd-number-five-anim 1.2s ease 0s 1 normal;
-o-animation: cd-number-five-anim 1.2s ease 0s 1 normal;
animation: cd-number-five-anim 1.2s ease 0s 1 normal;
}
@-webkit-keyframes cd-number-five-anim {
from {-webkit-transform: scale(0.5); opacity: 0;}
to { -webkit-transform: scale(1.3); opacity: 1;}}
@-moz-keyframes cd-number-five-anim {
from {-moz-transform: scale(0.5); opacity: 0;}
to { -moz-transform: scale(1.3); opacity: 1;}}
@-o-keyframes cd-number-five-anim {
from {-o-transform: scale(0.5); opacity: 0;}
to { -o-transform: scale(1.3); opacity: 1;}}
@-ms-keyframes cd-number-five-anim {
from {-ms-transform: scale(0.5); opacity: 0;}
to { -ms-transform: scale(1.3); opacity: 1;}}
@keyframes cd-number-five-anim {
from {transform: scale(0.5); opacity: 0;}
to { transform: scale(1.3); opacity: 1;}}
.cd-number-four {
position: absolute;
opacity: 0;
-webkit-animation: cd-number-four-anim 1.2s ease 1.2s 1 normal;
-moz-animation: cd-number-four-anim 1.2s ease 1.2s 1 normal;
-ms-animation: cd-number-four-anim 1.2s ease 1.2s 1 normal;
-o-animation: cd-number-four-anim 1.2s ease 1.2s 1 normal;
animation: cd-number-four-anim 1.2s ease 1.2s 1 normal;
}
@-webkit-keyframes cd-number-four-anim {
from {-webkit-transform: scale(0.5); opacity: 0;}
to { -webkit-transform: scale(1.3); opacity: 1;}}
@-moz-keyframes cd-number-four-anim {
from {-moz-transform: scale(0.5); opacity: 0;}
to { -moz-transform: scale(1.3); opacity: 1;}}
@-o-keyframes cd-number-four-anim {
from {-o-transform: scale(0.5); opacity: 0;}
to { -o-transform: scale(1.3); opacity: 1;}}
@-ms-keyframes cd-number-four-anim {
from {-ms-transform: scale(0.5); opacity: 0;}
to { -ms-transform: scale(1.3); opacity: 1;}}
@keyframes cd-number-four-anim {
from {transform: scale(0.5); opacity: 0;}
to { transform: scale(1.3); opacity: 1;}}
.cd-number-three {
position: absolute;
opacity: 0;
-webkit-animation: cd-number-three-anim 1.2s ease 2.4s 1 normal;
-moz-animation: cd-number-three-anim 1.2s ease 2.4s 1 normal;
-ms-animation: cd-number-three-anim 1.2s ease 2.4s 1 normal;
-o-animation: cd-number-three-anim 1.2s ease 2.4s 1 normal;
animation: cd-number-three-anim 1.2s ease 2.4s 1 normal;
}
@-webkit-keyframes cd-number-three-anim {
from {-webkit-transform: scale(0.5); opacity: 0;}
to { -webkit-transform: scale(1.3); opacity: 1;}}
@-moz-keyframes cd-number-three-anim {
from {-moz-transform: scale(0.5); opacity: 0;}
to { -moz-transform: scale(1.3); opacity: 1;}}
@-o-keyframes cd-number-three-anim {
from {-o-transform: scale(0.5); opacity: 0;}
to { -o-transform: scale(1.3); opacity: 1;}}
@-ms-keyframes cd-number-three-anim {
from {-ms-transform: scale(0.5); opacity: 0;}
to { -ms-transform: scale(1.3); opacity: 1;}}
@keyframes cd-number-three-anim {
from {transform: scale(0.5); opacity: 0;}
to { transform: scale(1.3); opacity: 1;}}
.cd-number-two {
position: absolute;
opacity: 0;
-webkit-animation: cd-number-two-anim 1.2s ease 3.6s 1 normal;
-moz-animation: cd-number-two-anim 1.2s ease 3.6s 1 normal;
-ms-animation: cd-number-two-anim 1.2s ease 3.6s 1 normal;
-o-animation: cd-number-two-anim 1.2s ease 3.6s 1 normal;
animation: cd-number-two-anim 1.2s ease 3.6s 1 normal;
}
@-webkit-keyframes cd-number-two-anim {
from {-webkit-transform: scale(0.5); opacity: 0;}
to { -webkit-transform: scale(1.3); opacity: 1;}}
@-moz-keyframes cd-number-two-anim {
from {-moz-transform: scale(0.5); opacity: 0;}
to { -moz-transform: scale(1.3); opacity: 1;}}
@-o-keyframes cd-number-two-anim {
from {-o-transform: scale(0.5); opacity: 0;}
to { -o-transform: scale(1.3); opacity: 1;}}
@-ms-keyframes cd-number-two-anim {
from {-ms-transform: scale(0.5); opacity: 0;}
to { -ms-transform: scale(1.3); opacity: 1;}}
@keyframes cd-number-two-anim {
from {transform: scale(0.5); opacity: 0;}
to { transform: scale(1.3); opacity: 1;}}
.cd-number-one {
position: absolute;
opacity: 0;
-webkit-animation: cd-number-one-anim 1.2s ease 4.8s 1 normal;
-moz-animation: cd-number-one-anim 1.2s ease 4.8s 1 normal;
-ms-animation: cd-number-one-anim 1.2s ease 4.8s 1 normal;
-o-animation: cd-number-one-anim 1.2s ease 4.8s 1 normal;
animation: cd-number-one-anim 1.2s ease 4.8s 1 normal;
}
@-webkit-keyframes cd-number-one-anim {
from {-webkit-transform: scale(0.5); opacity: 0;}
to { -webkit-transform: scale(1.3); opacity: 1;}}
@-moz-keyframes cd-number-one-anim {
from {-moz-transform: scale(0.5); opacity: 0;}
to { -moz-transform: scale(1.3); opacity: 1;}}
@-o-keyframes cd-number-one-anim {
from {-o-transform: scale(0.5); opacity: 0;}
to { -o-transform: scale(1.3); opacity: 1;}}
@-ms-keyframes cd-number-one-anim {
from {-ms-transform: scale(0.5); opacity: 0;}
to { -ms-transform: scale(1.3); opacity: 1;}}
@keyframes cd-number-one-anim {
from {transform: scale(0.5); opacity: 0;}
to { transform: scale(1.3); opacity: 1;}}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.