pac-man
by Daniel Hall
HTML
<a style="position: absolute;
color: red; top: 5%; left: 45%; width: 30%; height: 30%;" href="http://google.com/pacman" target="_blank">
start</a>
<iframe action="http://google.com" target="_blank"style="color: black;background-color: scr: http://jsfiddle.net; width: 100%; height:100%; "></iframe>
<!-- You could do this with pseudo elements, but then it wouldn't animate in anything but FF4+ or IE10+ -->¨
<span class="pacman"><span class="pacman-mouth"></span></span>
<div class="dot" id="dot1"></div>
<div class="dot" id="dot2"></div>
<div class="dot" id="dot3"></div>
<div class="dot" id="dot4"></div>
<div id="b_dot"></div>
<div class="dot" id="dot5"></div>
<div class="dot" id="dot6"></div>
<div class="dot" id="dot7"></div>
<div class="line" id="top_line"></div>
<div class="line" id="bottom_line"></div>
<form action="http://jsfiddle.net/danielrobert/vhqd7xL7/" target="_blank">
<button style="position: absolute; left: 41%;top: 10%;">
how to go
</button>
</form>
<form action="http://jsfiddle.net/user/danielrobert/fiddles" target="_blank">
<button style="position: absolute; left: 40%; top: 15%;">
other games
</button>
</form>CSS
body {
background-color: black;
}
html {
background:#000;
}
.pacman {
display:block;
width:0;
height:0;
margin:0 auto;
border:100px solid yellow;
border-radius:100px;
}
.pacman-mouth {
display:block;
width:0;
height:0;
margin:-10px auto 0;
border-bottom:100px solid transparent;
border-top:100px solid transparent;
border-right:100px solid #000;
-webkit-animation-duration:750ms;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:loaderpacman;
-moz-animation-duration:75ms;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-name:loaderpacman;
animation-duration:50ms;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-name:loaderpacman;
}
@-moz-keyframes loaderpacman {
0% {
border-bottom-width:100px;
border-top-width:1px;
margin-top:-10px;
}
50% {
border-bottom-width:1px;
border-top-width:1px;
margin-top:0px;
}
100% {
border-bottom-width:100px;
border-top-width:100px;
margin-top:-100px;
}
}
@-webkit-keyframes loaderpacman {
0% {
border-bottom-width:100px;
border-top-width:100px;
margin-top:-100px;
}
50% {
border-bottom-width:1px;
border-top-width:1px;
margin-top:0px;
}
100% {
border-bottom-width:100px;
border-top-width:100px;
margin-top:-100px;
}
}
@keyframes loaderpacman {
0% {
border-bottom-width:100px;
border-top-width:100px;
margin-top:-100px;
}
50% {
border-bottom-width:1px;
border-top-width:1px;
margin-top:0px;
}
100% {
border-bottom-width:100px;
border-top-width:100px;
margin-top:-100px;
}
}body {
background-color: black;
}
.dot {
background-color: white;
width: 2%;
height: 2%;
}
#dot1 {
position: absolute;
left: 60%;
top: 45%;
}
#dot2 {
position: absolute;
left: 65%;
top: 45%;
}
#dot3 {
...