<div class="wrapper">
<div class="grid">
<div class="container">
<h2 class="killer">killer</h1>
<h1 class="demon">DEMON</h2>
</div>
</div>
<input class="input-demon input-demon1" type="radio" id="demon1">
<input class="input-demon input-demon2" type="radio" id="demon2">
<input class="input-demon input-demon3" type="radio" id="demon3">
<input class="input-demon input-demon4" type="radio" id="demon4">
<input class="input-demon input-demon5" type="radio" id="demon5">
<input class="input-demon input-demon6" type="radio" id="demon6">
<input class="input-demon input-demon7" type="radio" id="demon7">
<input class="input-demon input-demon8" type="radio" id="demon8">
<label for="demon1" class="minion minion1"><span></span></label>
<label for="demon2" class="minion minion2"><span></span></label>
<label for="demon3" class="minion minion3"><span></span></label>
<label for="demon4" class="minion minion4"><span></span></label>
<label for="demon5" class="minion minion5"><span></span></label>
<label for="demon6" class="minion minion6"><span></span></label>
<label for="demon7" class="minion minion7"><span></span></label>
<label for="demon8" class="minion minion8"><span></span></label>
<div class="sum">Minions Destroyed: </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Lato:900|Creepster);
html {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background: #000000;
background: -webkit-gradient(linear, left top, right bottom, color-stop(68%, #000000), color-stop(75%, #ff0000), color-stop(81%, #cccccc), color-stop(81%, #cccccc), color-stop(91%, #111111), color-stop(95%, #000000), color-stop(95%, #000000));
background: -webkit-linear-gradient(-45deg, #000000 68%, #ff0000 75%, #cccccc 81%, #cccccc 81%, #111111 91%, #000000 95%, #000000 95%);
background: -webkit-linear-gradient(315deg, #000000 68%, #ff0000 75%, #cccccc 81%, #cccccc 81%, #111111 91%, #000000 95%, #000000 95%);
background: linear-gradient(135deg, #000000 68%, #ff0000 75%, #cccccc 81%, #cccccc 81%, #111111 91%, #000000 95%, #000000 95%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
body {
width: 100%;
height: 100%;
background: -webkit-repeating-linear-gradient(103deg, #ff0000, rgba(255, 0, 0, 0.7) 1px, #ff0000 2px, transparent 6px, transparent 150px);
background: repeating-linear-gradient(-13deg, #ff0000, rgba(255, 255, 255, 0.7) 1px, #ff0000 2px, transparent 6px, transparent 150px);
margin: 0;
}
.grid {
width: 100%;
height: 100%;
background: -webkit-repeating-linear-gradient(45deg, #ff0000, rgba(255, 0, 0, 0.7) 1px, #ff0000 2px, transparent 6px, transparent 150px);
background: repeating-linear-gradient(45deg, #ff0000, rgba(255, 255, 255, 0.7) 1px, #ff0000 2px, transparent 6px, transparent 150px);
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.container {
position: relative;
width: 500px;
margin: auto;
text-align: center;
padding-top: 10%;
}
/* counter-reset */
body {
counter-reset: littledevil 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
}
/*hide checkbox*/
input {
position: fixed;
left: -10px;
top: -10px;
}
/*play area*/
.wrapper {
height: 100%;
width: 100%;
position: absolute;
cursor: crosshair;
}
/*count dead minions*/
.input-demon:checked {
counter-increment: littledevil;
}
.sum {
position: fixed;
width: 100%;
text-align: center;
bottom: 30px;
height: auto;
font-size: 18px;
font-weight: bold;
font-family: Lato;
color: #fff;
letter-spacing: 3px;
text-transform: uppercase;
}
/*print to screen dead minion total*/
.sum:after {
content: counter(littledevil);
}
.input-demon ~ .minion {
opacity: 0;
-webkit-transition: 0.3s cubic-bezier(0, .43, 1, 0);
transition: 0.3s cubic-bezier(0, .43, 1, 0);
-webkit-animation: move 8s infinite alternate;
animation: move 8s infinite alternate;
}
.input-demon1:not(:checked) ~ .minion1, .input-demon2:not(:checked) ~ .minion2, .input-demon3:not(:checked) ~ .minion3, .input-demon4:not(:checked) ~ .minion4, .input-demon5:not(:checked) ~ .minion5, .input-demon6:not(:checked) ~ .minion6, .input-demon7:not(:checked) ~ .minion7, .input-demon8:not(:checked) ~ .minion8 {
opacity: 1;
}
.input-demon1:checked ~ .minion1 span, .input-demon2:checked ~ .minion2 span, .input-demon3:checked ~ .minion3 span, .input-demon4:checked ~ .minion4 span, .input-demon5:checked ~ .minion5 span, .input-demon6:checked ~ .minion6, .input-demon7:checked ~ .minion7 span, .input-demon8:checked ~ .minion8 span {
display: block;
}
/*-----------
Flying Minions */
.minion {
position: absolute;
left: 0;
cursor: crosshair;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/devil_compressed.gif);
width: 191px;
height: 144px;
z-index: 2;
}
.minion>span {
display: none;
position: absolute;
z-index: 2;
text-align: center;
color: rgba(255,252,252,0.5);
font-weight: bolder;
width: 100px;
height: 100px;
}
.minion>span:before {
content: "☠";
font-size: 150px;
}
/* Uncomment and add your minions for targeted content messages.
.minion1>span:before {
content: "Can't Kill the Dead";
*/
.minion1 {
top: 10%;
-webkit-animation-delay: -2s!important;
animation-delay: -2s!important;
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.minion2 {
top: 20%;
-webkit-animation-delay: -4s!important;
animation-delay: -4s!important;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.minion3 {
top: 30%;
-webkit-animation-delay: -3s!important;
animation-delay: -3s!important;
-webkit-transform: scale(1.25);
-ms-transform: scale(1.25);
transform: scale(1.25);
}
.minion4 {
top: 40%;
-webkit-animation-delay: -8s!important;
animation-delay: -8s!important;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.minion5 {
top: 50%;
-webkit-animation-delay: -16s!important;
animation-delay: -16s!important;
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.minion6 {
top: 60%;
-webkit-animation-delay: -9s!important;
animation-delay: -9s!important;
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.minion7 {
top: 70%;
-webkit-animation-delay: -6s!important;
animation-delay: -6s!important;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.minion8 {
top: 80%;
-webkit-animation-delay: -12s!important;
animation-delay: -12s!important;
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
}
@-webkit-keyframes move {
0% {
left:0%;
}
20% {
left:20%;
top:50%;
}
40% {
top:30%;
left:60%;
}
60% {
top:80%;
left:80%;
}
80% {
top:10%;
left:20%;
}
100% {
top:30%;
left:20%;
}
}
@keyframes move {
0% {
left:0%;
}
20% {
left:20%;
top:50%;
}
40% {
top:30%;
left:60%;
}
60% {
top:80%;
left:80%;
}
80% {
top:10%;
left:20%;
}
100% {
top:30%;
left:20%;
}
}
/* Page Stying */
h1 {
z-index: 1;
font-size: 10vw;
color: #ff0000;
padding-top: 25%;
font-family: 'Creepster', cursive;
letter-spacing: 10px;
text-shadow: 5px 3px 0px #000;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-transform: rotate(-13deg);
-ms-transform: rotate(-13deg);
transform: rotate(-13deg);
text-align: center;
width: 100%;
letter-spacing: 10px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
h2 {
z-index: 2;
font-size: 7vw;
color: grey;
padding-left:17%;
padding-top: 45%;
font-family: 'Creepster', cursive;
letter-spacing: 10px;
text-shadow: 5px 3px 0px #000;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
width: 100%;
letter-spacing: 10px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.