Thursday 8 June 2017
WHACK A RAT CSS GAME
-----------------------------------------------------------------------------------------------------------------
ReadMore:
https://dzone.com/articles/css3-games-collection
http://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html
http://tinhot.biz/tags/css-game/587748.html
http://www.dynamicdrive.com/dynamicindex12/
-----------------------------------------------------------------------------------------------------------------
USEFUL IMAGES:
------------------------------------------------------------------------------------------------------------------
CODE:
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
Whack-a-Rat
CSS only game
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!--[COPY FROM]>
http://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html
<![COPY FROM]-->
<title> Stu Nicholls | CSS
PLAY | Whack a Rat </title>
<style>
/*
================================================================
This copyright notice must be untouched
at all times.
The original version of this stylesheet
and the associated (x)html
is available at
http://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html
Copyright (c) Stu Nicholls. All rights
reserved.
This stylesheet and the associated
(x)html may be modified in any
way to fit your requirements.
===================================================================
*/
#whack {position: relative;
margin:100px auto; width:440px; height:400px;}
#rat {position:absolute; left:0; top:0;
width:440px; height:400px;
background:url(http://www.cssplay.co.uk/menu/whack/mounds.png); overflow:hidden;
border-radius:10px;
box-shadow:0 15px 10px -15px
rgba(0,0,0,0.9);
}
#timer {width:20px; height:300px;
background:url(http://www.cssplay.co.uk/menu/whack/timer.png) left center;
position:absolute; right:2px; bottom:50px; z-index:100; border-radius:20px;
-moz-animation: timer 15s 0s 1 linear
normal forwards;
-webkit-animation: timer 15s 0s 1
linear normal forwards;
-o-animation: timer 15s 0s 1 linear
normal forwards;
animation: timer 15s 0s 1 linear normal
forwards;
}
#whack .replay {display:block;
font:bold 25px/30px arial, sans-serif; color:#fff; text-decoration:none;
position:absolute; top:20px; left:160px; width:128px; text-align:center;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);}
#whack .replay:hover {color:#c00;}
#whack p {display:block; font:bold
25px/30px arial, sans-serif; color:#fff; position:absolute; bottom:20px;
left:160px; width:128px; text-align:center; padding:0; margin:0; text-shadow:
0px 4px 4px rgba(0, 0, 0, 0.4);}
.rats {display:none;}
#rat1 + label {position:absolute;
left:27px; bottom:265px;
-moz-animation: rat1 15s 0s 1 linear
normal forwards;
-webkit-animation: rat1 15s 0s 1 linear
normal forwards;
-o-animation: rat1 15s 0s 1 linear
normal forwards;
animation: rat1 15s 0s 1 linear normal
forwards;
}
#rat2 + label {position:absolute;
left:283px; bottom:265px;
-moz-animation: rat2 15s 0s 1 linear
normal forwards;
-webkit-animation: rat2 15s 0s 1 linear
normal forwards;
-o-animation: rat2 15s 0s 1 linear
normal forwards;
animation: rat2 15s 0s 1 linear normal
forwards;
}
#rat3 + label {position:absolute;
left:154px; bottom:176px;
-moz-animation: rat3 15s 0s 1 linear
normal forwards;
-webkit-animation: rat3 15s 0s 1 linear
normal forwards;
-o-animation: rat3 15s 0s 1 linear
normal forwards;
animation: rat3 15s 0s 1 linear normal
forwards;
}
#rat4 + label {position:absolute;
left:27px; bottom:88px;
-moz-animation: rat4 15s 0s 1 linear
normal forwards;
-webkit-animation: rat4 15s 0s 1 linear
normal forwards;
-o-animation: rat4 15s 0s 1 linear
normal forwards;
animation: rat4 15s 0s 1 linear normal
forwards;
}
#rat5 + label {position:absolute;
left:283px; bottom:88px;
-moz-animation: rat5 15s 0s 1 linear
normal forwards;
-webkit-animation: rat5 15s 0s 1 linear
normal forwards;
-o-animation: rat5 15s 0s 1 linear
normal forwards;
animation: rat5 15s 0s 1 linear normal
forwards;
}
#rat6 + label {position:absolute;
left:27px; bottom:265px;
-moz-animation: rat6 15s 0s 1 linear
normal forwards;
-webkit-animation: rat6 15s 0s 1 linear
normal forwards;
-o-animation: rat6 15s 0s 1 linear
normal forwards;
animation: rat6 15s 0s 1 linear normal
forwards;
}
#rat7 + label {position:absolute;
left:283px; bottom:265px;
-moz-animation: rat7 15s 0s 1 linear
normal forwards;
-webkit-animation: rat7 15s 0s 1 linear
normal forwards;
-o-animation: rat7 15s 0s 1 linear
normal forwards;
animation: rat7 15s 0s 1 linear normal
forwards;
}
#rat8 + label {position:absolute;
left:154px; bottom:176px;
-moz-animation: rat8 15s 0s 1 linear
normal forwards;
-webkit-animation: rat8 15s 0s 1 linear
normal forwards;
-o-animation: rat8 15s 0s 1 linear
normal forwards;
animation: rat8 15s 0s 1 linear normal
forwards;
}
#rat9 + label {position:absolute;
left:27px; bottom:88px;
-moz-animation: rat9 15s 0s 1 linear
normal forwards;
-webkit-animation: rat9 15s 0s 1 linear
normal forwards;
-o-animation: rat9 15s 0s 1 linear
normal forwards;
animation: rat9 15s 0s 1 linear normal
forwards;
}
#rat10 + label {position:absolute;
left:283px; bottom:88px;
-moz-animation: rat10 15s 0s 1 linear
normal forwards;
-webkit-animation: rat10 15s 0s 1
linear normal forwards;
-o-animation: rat10 15s 0s 1 linear
normal forwards;
animation: rat10 15s 0s 1 linear normal
forwards;
}
#rat11 + label {position:absolute; left:27px;
bottom:265px;
-moz-animation: rat11 15s 0s 1 linear
normal forwards;
-webkit-animation: rat11 15s 0s 1
linear normal forwards;
-o-animation: rat11 15s 0s 1 linear
normal forwards;
animation: rat11 15s 0s 1 linear normal
forwards;
}
#rat12 + label {position:absolute;
left:283px; bottom:265px;
-moz-animation: rat12 15s 0s 1 linear
normal forwards;
-webkit-animation: rat12 15s 0s 1
linear normal forwards;
-o-animation: rat12 15s 0s 1 linear
normal forwards;
animation: rat12 15s 0s 1 linear normal
forwards;
}
#rat13 + label {position:absolute;
left:154px; bottom:176px;
-moz-animation: rat13 15s 0s 1 linear
normal forwards;
-webkit-animation: rat13 15s 0s 1
linear normal forwards;
-o-animation: rat13 15s 0s 1 linear
normal forwards;
animation: rat13 15s 0s 1 linear normal
forwards;
}
#rat14 + label {position:absolute;
left:27px; bottom:88px;
-moz-animation: rat14 15s 0s 1 linear
normal forwards;
-webkit-animation: rat14 15s 0s 1
linear normal forwards;
-o-animation: rat14 15s 0s 1 linear
normal forwards;
animation: rat14 15s 0s 1 linear normal
forwards;
}
#rat15 + label {position:absolute;
left:283px; bottom:88px;
-moz-animation: rat15 15s 0s 1 linear
normal forwards;
-webkit-animation: rat15 15s 0s 1
linear normal forwards;
-o-animation: rat15 15s 0s 1 linear
normal forwards;
animation: rat15 15s 0s 1 linear normal
forwards;
}
.rats + label {width:128px; height:0;
background: url(http://www.cssplay.co.uk/menu/whack/rat.png) 0 0;
overflow:hidden;}
.rats + label img {width:100%;
height:100%; display:none;}
.rats:checked + label img
{display:block;}
#score {position:absolute; left:200px;
top:289px; width:50px; height:50px; overflow:hidden;}
#scores {margin-top:-750px;}
.score {display:block; width:50px;
height:50px; border:0; padding:0; margin:0 0 -50px 0;
-moz-transition:0.25s;
-webkit-transition:0.25s;
-o-transition:0.25s;
transition:0.25s;
}
.score:checked {display:block;
width:50px; height:50px; border:0; padding:0; margin:0;}
#scored b {display:block; width:50px;
height:50px; font:bold 40px/50px arial, sans-serif; color:#c00;
text-align:center;}
@-moz-keyframes rat1 {
0% {height:0;}
40% {height:0;}
41% {height:128px;}
46% {height:128px;}
47% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat2 {
0% {height:0;}
30% {height:0;}
31% {height:128px;}
40% {height:128px;}
41% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat3 {
0% {height:0;}
20% {height:0;}
21% {height:128px;}
26% {height:128px;}
27% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat4 {
0% {height:0;}
25% {height:0;}
26% {height:128px;}
33% {height:128px;}
34% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat5 {
0% {height:0;}
15% {height:0;}
16% {height:128px;}
21% {height:128px;}
22% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat6 {
0% {height:0;}
55% {height:0;}
56% {height:128px;}
60% {height:128px;}
61% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat7 {
0% {height:0;}
60% {height:0;}
62% {height:128px;}
68% {height:128px;}
69% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat8 {
0% {height:0;}
45% {height:0;}
46% {height:128px;}
51% {height:128px;}
52% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat9 {
0% {height:0;}
50% {height:0;}
51% {height:128px;}
55% {height:128px;}
56% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat10 {
0% {height:0;}
35% {height:0;}
36% {height:128px;}
41% {height:128px;}
42% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat11 {
0% {height:0;}
80% {height:0;}
81% {height:128px;}
86% {height:128px;}
87% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat12 {
0% {height:0;}
85% {height:0;}
87% {height:128px;}
93% {height:128px;}
94% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat13 {
0% {height:0;}
65% {height:0;}
66% {height:128px;}
71% {height:128px;}
72% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat14 {
0% {height:0;}
70% {height:0;}
71% {height:128px;}
76% {height:128px;}
77% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat15 {
0% {height:0;}
75% {height:0;}
76% {height:128px;}
81% {height:128px;}
82% {height:0;}
100% {height:0;}
}
@-moz-keyframes timer {
0% {height:300px;}
100% {height:0;}
}
/* for Opera */
@-o-keyframes rat1 {
0% {height:0;}
40% {height:0;}
41% {height:128px;}
46% {height:128px;}
47% {height:0;}
100% {height:0;}
}
@-o-keyframes rat2 {
0% {height:0;}
30% {height:0;}
31% {height:128px;}
40% {height:128px;}
41% {height:0;}
100% {height:0;}
}
@-o-keyframes rat3 {
0% {height:0;}
20% {height:0;}
21% {height:128px;}
26% {height:128px;}
27% {height:0;}
100% {height:0;}
}
@-o-keyframes rat4 {
0% {height:0;}
25% {height:0;}
26% {height:128px;}
33% {height:128px;}
34% {height:0;}
100% {height:0;}
}
@-o-keyframes rat5 {
0% {height:0;}
15% {height:0;}
16% {height:128px;}
21% {height:128px;}
22% {height:0;}
100% {height:0;}
}
@-o-keyframes rat6 {
0% {height:0;}
55% {height:0;}
56% {height:128px;}
60% {height:128px;}
61% {height:0;}
100% {height:0;}
}
@-o-keyframes rat7 {
0% {height:0;}
60% {height:0;}
62% {height:128px;}
68% {height:128px;}
69% {height:0;}
100% {height:0;}
}
@-o-keyframes rat8 {
0% {height:0;}
45% {height:0;}
46% {height:128px;}
51% {height:128px;}
52% {height:0;}
100% {height:0;}
}
@-o-keyframes rat9 {
0% {height:0;}
50% {height:0;}
51% {height:128px;}
55% {height:128px;}
56% {height:0;}
100% {height:0;}
}
@-o-keyframes rat10 {
0% {height:0;}
35% {height:0;}
36% {height:128px;}
41% {height:128px;}
42% {height:0;}
100% {height:0;}
}
@-o-keyframes rat11 {
0% {height:0;}
80% {height:0;}
81% {height:128px;}
86% {height:128px;}
87% {height:0;}
100% {height:0;}
}
@-o-keyframes rat12 {
0% {height:0;}
85% {height:0;}
87% {height:128px;}
93% {height:128px;}
94% {height:0;}
100% {height:0;}
}
@-o-keyframes rat13 {
0% {height:0;}
65% {height:0;}
66% {height:128px;}
71% {height:128px;}
72% {height:0;}
100% {height:0;}
}
@-o-keyframes rat14 {
0% {height:0;}
70% {height:0;}
71% {height:128px;}
76% {height:128px;}
77% {height:0;}
100% {height:0;}
}
@-o-keyframes rat15 {
0% {height:0;}
75% {height:0;}
76% {height:128px;}
81% {height:128px;}
82% {height:0;}
100% {height:0;}
}
@-o-keyframes timer {
0% {height:300px;}
100% {height:0;}
}
/* for Safari and Chrome */
@-webkit-keyframes rat1 {
0% {height:0;}
40% {height:0;}
41% {height:128px;}
46% {height:128px;}
47% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat2 {
0% {height:0;}
30% {height:0;}
31% {height:128px;}
40% {height:128px;}
41% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat3 {
0% {height:0;}
20% {height:0;}
21% {height:128px;}
26% {height:128px;}
27% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat4 {
0% {height:0;}
25% {height:0;}
26% {height:128px;}
33% {height:128px;}
34% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat5 {
0% {height:0;}
15% {height:0;}
16% {height:128px;}
21% {height:128px;}
22% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat6 {
0% {height:0;}
55% {height:0;}
56% {height:128px;}
60% {height:128px;}
61% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat7 {
0% {height:0;}
60% {height:0;}
62% {height:128px;}
68% {height:128px;}
69% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat8 {
0% {height:0;}
45% {height:0;}
46% {height:128px;}
51% {height:128px;}
52% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat9 {
0% {height:0;}
50% {height:0;}
51% {height:128px;}
55% {height:128px;}
56% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat10 {
0% {height:0;}
35% {height:0;}
36% {height:128px;}
41% {height:128px;}
42% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat11 {
0% {height:0;}
80% {height:0;}
81% {height:128px;}
86% {height:128px;}
87% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat12 {
0% {height:0;}
85% {height:0;}
87% {height:128px;}
93% {height:128px;}
94% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat13 {
0% {height:0;}
65% {height:0;}
66% {height:128px;}
71% {height:128px;}
72% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat14 {
0% {height:0;}
70% {height:0;}
71% {height:128px;}
76% {height:128px;}
77% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat15 {
0% {height:0;}
75% {height:0;}
76% {height:128px;}
81% {height:128px;}
82% {height:0;}
100% {height:0;}
}
@-webkit-keyframes timer {
0% {height:300px;}
100% {height:0;}
}
/* for IE10 and latest Firefox */
@keyframes rat1 {
0% {height:0;}
40% {height:0;}
41% {height:128px;}
46% {height:128px;}
47% {height:0;}
100% {height:0;}
}
@keyframes rat2 {
0% {height:0;}
30% {height:0;}
31% {height:128px;}
40% {height:128px;}
41% {height:0;}
100% {height:0;}
}
@keyframes rat3 {
0% {height:0;}
20% {height:0;}
21% {height:128px;}
26% {height:128px;}
27% {height:0;}
100% {height:0;}
}
@keyframes rat4 {
0% {height:0;}
25% {height:0;}
26% {height:128px;}
33% {height:128px;}
34% {height:0;}
100% {height:0;}
}
@keyframes rat5 {
0% {height:0;}
15% {height:0;}
16% {height:128px;}
21% {height:128px;}
22% {height:0;}
100% {height:0;}
}
@keyframes rat6 {
0% {height:0;}
55% {height:0;}
56% {height:128px;}
60% {height:128px;}
61% {height:0;}
100% {height:0;}
}
@keyframes rat7 {
0% {height:0;}
60% {height:0;}
62% {height:128px;}
68% {height:128px;}
69% {height:0;}
100% {height:0;}
}
@keyframes rat8 {
0% {height:0;}
45% {height:0;}
46% {height:128px;}
51% {height:128px;}
52% {height:0;}
100% {height:0;}
}
@keyframes rat9 {
0% {height:0;}
50% {height:0;}
51% {height:128px;}
55% {height:128px;}
56% {height:0;}
100% {height:0;}
}
@keyframes rat10 {
0% {height:0;}
35% {height:0;}
36% {height:128px;}
41% {height:128px;}
42% {height:0;}
100% {height:0;}
}
@keyframes rat11 {
0% {height:0;}
80% {height:0;}
81% {height:128px;}
86% {height:128px;}
87% {height:0;}
100% {height:0;}
}
@keyframes rat12 {
0% {height:0;}
85% {height:0;}
87% {height:128px;}
93% {height:128px;}
94% {height:0;}
100% {height:0;}
}
@keyframes rat13 {
0% {height:0;}
65% {height:0;}
66% {height:128px;}
71% {height:128px;}
72% {height:0;}
100% {height:0;}
}
@keyframes rat14 {
0% {height:0;}
70% {height:0;}
71% {height:128px;}
76% {height:128px;}
77% {height:0;}
100% {height:0;}
}
@keyframes rat15 {
0% {height:0;}
75% {height:0;}
76% {height:128px;}
81% {height:128px;}
82% {height:0;}
100% {height:0;}
}
@keyframes timer {
0% {height:300px;}
100% {height:0;}
}
</style>
<style>
@media only screen and
(max-width:480px) {
#whack {display:none;}
#info h3.smartphone {display:block;}
}
</style>
</head>
<body id="www-cssplay-co-uk" class="demos">
<div id="whack">
<div id="rat">
<input type="radio" name="rat1" id="rat1" class="rats"><label for="rat1"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat2" id="rat2" class="rats"><label for="rat2"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat3" id="rat3" class="rats"><label for="rat3"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat4" id="rat4" class="rats"><label for="rat4"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat5" id="rat5" class="rats"><label for="rat5"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat6" id="rat6" class="rats"><label for="rat6"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat7" id="rat7" class="rats"><label for="rat7"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat8" id="rat8" class="rats"><label for="rat8"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat9" id="rat9" class="rats"><label for="rat9"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat10" id="rat10" class="rats"><label for="rat10"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat11" id="rat11" class="rats"><label for="rat11"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat12" id="rat12" class="rats"><label for="rat12"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat13" id="rat13" class="rats"><label for="rat13"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat14" id="rat14" class="rats"><label for="rat14"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
<input type="radio" name="rat15" id="rat15" class="rats"><label for="rat15"><img src="http://www.cssplay.co.uk/menu/whack/rat2.png" alt=""></label>
</div>
<div id="score">
<div id="scores">
<input type="radio" name="rat1" id="score1" class="score" checked="checked">
<input type="radio" name="rat2" id="score2" class="score" checked="checked">
<input type="radio" name="rat3" id="score3" class="score" checked="checked">
<input type="radio" name="rat4" id="score4" class="score" checked="checked">
<input type="radio" name="rat5" id="score5" class="score" checked="checked">
<input type="radio" name="rat6" id="score6" class="score" checked="checked">
<input type="radio" name="rat7" id="score7" class="score" checked="checked">
<input type="radio" name="rat8" id="score8" class="score" checked="checked">
<input type="radio" name="rat9" id="score9" class="score" checked="checked">
<input type="radio" name="rat10" id="score10" class="score" checked="checked">
<input type="radio" name="rat11" id="score11" class="score" checked="checked">
<input type="radio" name="rat12" id="score12" class="score" checked="checked">
<input type="radio" name="rat13" id="score13" class="score" checked="checked">
<input type="radio" name="rat14" id="score14" class="score" checked="checked">
<input type="radio" name="rat15" id="score15" class="score" checked="checked">
<div id="scored"><b>00</b><b>01</b><b>02</b><b>03</b><b>04</b><b>05</b><b>06</b><b>07</b><b>08</b><b>09</b><b>10</b><b>11</b><b>12</b><b>13</b><b>14</b><b>15</b></div>
</div>
</div>
<p>SCORE</p>
<div id="timer"></div>
<a class="replay" href="javascript:window.location = window.location;">REPLAY</a>
</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment