CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after {
content: '';
content: none; }
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
* {
box-sizing: border-box; }
body {
color: #555;
font: 16px/1.5em Helvetica, Arial, Geneva, Tahoma, sans-serif;
background: #f3f3f3;
min-height: 1000px; }
ol, ul {
list-style: none; }
h1 {
margin: 0;
font-size: 1.5em;
line-height: 1em;
margin-top: 1em;
text-align: center; }
h2, h3 {
margin: 0;
font-size: 1.25em;
line-height: 1.2em;
margin-bottom: 1.2em;
text-align: center; }
a {
line-height: 1.5em;
display: inline-block; }
a:link, a:visited {
text-decoration: none;
color: #555; }
a:hover, a:active {
text-decoration: underline;
color: #333; }
.wrapAction {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
width: 100px;
display: block;
height: 100px;
margin: 12px auto;
cursor: pointer; }
.wrapAction div div {
height: 10px;
width: 94px;
overflow: hidden;
position: relative;
display: block; }
.wrapAction span {
overflow: hidden;
display: block;
position: relative;
height: 1px;
width: 100%; }
.wrapAction p {
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 10px, #fff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 40px, #fff 40px, rgba(0, 0, 0, 0) 41px, rgba(0, 0, 0, 0) 41px); }
.topAction {
border: 1px solid #000;
border-radius: 3px;
position: absolute;
bottom: 60px;
background: #555;
height: 16px;
width: 100px; }
.bottomAction {
border: 1px solid #000;
border-radius: 3px;
position: absolute;
bottom: 0;
background: #555;
text-align: center;
font-weight: 900;
color: #fff;
text-transform: uppercase;
height: 60px;
line-height: 50px;
width: 100px; }
.clapTop span {
border: 6px dotted #eee;
transform: skew(45deg) translate(0, 15px) scale(1.9, 5.5); }
.clapBot span {
border: 6px dotted #eee;
transform: skew(135deg) translate(0, 15px) scale(1.9, 5.5); }
.topAction div, .bottomAction div {
margin: 2px; }
.active {
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
transform: translate3d(-2px, -8px, 0) rotate(-10deg); }
.clapTop1 div {
background: #333333;
background: -moz-linear-gradient(45deg, #333333 17%, #1f8a62 17%, #1f8a62 27%, #d6bc69 27%, #d6bc69 37%, #2e8ad3 37%, #2e8ad3 47%, #c31939 47%, #c31939 57%, #eeeeee 57%, #eeeeee 67%, #999999 67%, #999999 77%, #555555 77%, #555555 87%, #222222 87%, #222222 100%);
background: -webkit-linear-gradient(45deg, #333333 17%, #1f8a62 17%, #1f8a62 27%, #d6bc69 27%, #d6bc69 37%, #2e8ad3 37%, #2e8ad3 47%, #c31939 47%, #c31939 57%, #eeeeee 57%, #eeeeee 67%, #999999 67%, #999999 77%, #555555 77%, #555555 87%, #222222 87%, #222222 100%);
background: linear-gradient(45deg, #333333 17%, #1f8a62 17%, #1f8a62 27%, #d6bc69 27%, #d6bc69 37%, #2e8ad3 37%, #2e8ad3 47%, #c31939 47%, #c31939 57%, #eeeeee 57%, #eeeeee 67%, #999999 67%, #999999 77%, #555555 77%, #555555 87%, #222222 87%, #222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333333",endColorstr="#222222",GradientType=1); }
.clapBot1 div {
background: #333333;
background: -moz-linear-gradient(135deg, #333333 17%, #1f8a62 17%, #1f8a62 27%, #d6bc69 27%, #d6bc69 37%, #2e8ad3 37%, #2e8ad3 47%, #c31939 47%, #c31939 57%, #eeeeee 57%, #eeeeee 67%, #999999 67%, #999999 77%, #555555 77%, #555555 87%, #222222 87%, #222222 100%);
background: -webkit-linear-gradient(135deg, #333333 17%, #1f8a62 17%, #1f8a62 27%, #d6bc69 27%, #d6bc69 37%, #2e8ad3 37%, #2e8ad3 47%, #c31939 47%, #c31939 57%, #eeeeee 57%, #eeeeee 67%, #999999 67%, #999999 77%, #555555 77%, #555555 87%, #222222 87%, #222222 100%);
background: linear-gradient(135deg, #333333 17%, #1f8a62 17%, #1f8a62 27%, #d6bc69 27%, #d6bc69 37%, #2e8ad3 37%, #2e8ad3 47%, #c31939 47%, #c31939 57%, #eeeeee 57%, #eeeeee 67%, #999999 67%, #999999 77%, #555555 77%, #555555 87%, #222222 87%, #222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333333",endColorstr="#222222",GradientType=1); }
.clapTop2 div {
background: #333333;
background: -webkit-repeating-linear-gradient(45deg, transparent 0, transparent 10%, #fff 10%, #fff 20%);
background: -o-repeating-linear-gradient(45deg, transparent 0, transparent 10%, #fff 10%, #fff 20%);
background: repeating-linear-gradient(45deg, transparent 0, transparent 10%, #fff 10%, #fff 20%); }
.clapBot2 div {
background: #333333;
background: -webkit-repeating-linear-gradient(315deg, transparent 0, transparent 10%, #fff 10%, #fff 20%);
background: -o-repeating-linear-gradient(315deg, transparent 0, transparent 10%, #fff 10%, #fff 20%);
background: repeating-linear-gradient(135deg, transparent 0, transparent 10%, #fff 10%, #fff 20%); }
.leftTriangle {
position: absolute;
border-radius: 20%;
color: #000;
text-align: center;
height: 0;
width: 0;
bottom: 35px;
border-top: 20px solid transparent;
border-left: 20px solid #aaa;
border-bottom: 20px solid transparent;
display: block;
line-height: 16px;
left: 3px; }
.leftTriangle:after {
content: '\00B0 \00B0';
display: block;
transform: translate(-16px, -28px) rotate(45deg); }
.leftTriangle:before {
content: '\00B0';
display: block;
transform: translate(-21px, -16px); }
