Moving Pacman in Pure CSS3
Below example are moving pacman created with fully pure in css3 and HTML5.
So far this pacman write with two vendor prefix Mozilla and webkit. So please open with these two browser only. You can add other prefix by yourself.
HTML
<body>
<div class=”pacman”>
<div class=”mouthUp”>
<div class=”eye”></div>
</div>
<div class=”mouthDown”></div>
</div><div class=”food”>
<div class=”dot1″></div>
<div class=”dot2″></div>
<div class=”dot3″></div>
<div class=”dot4″></div>
</div>
</body>
CSS
<style>
.food{
top:50px;
left:100px;
width: 700px;
height:30px;
position:absolute;
}
.dot1, .dot2, .dot3, .dot4{
background: #000 ;
width:30px;
height:30px;
border-radius:20px;
margin:0 70px 0 33px;
display: inline-block;}
.dot1{
-moz-animation: habisFood 9s infinite;
-webkit-animation: habisFood 9s infinite;
}.dot2{
-moz-animation: habisFood2 9s infinite;
-webkit-animation: habisFood2 9s infinite;
}
.dot3{
-moz-animation: habisFood3 9s infinite;
-webkit-animation: habisFood3 9s infinite;}
.dot4{
-moz-animation: habisFood4 9s infinite;
-webkit-animation: habisFood4 9s infinite;
}.pacman{
position: absolute;
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
-moz-animation: startEat 9s infinite;
-webkit-animation: startEat 9s infinite;
}.mouthUp{
position: absolute;
left:-60px;
top:-60px;
width: 0px;
height: 0px;
border-right: 60px solid red;
border-top: 60px solid transparent;
border-left: 60px solid transparent;
border-bottom: 60px solid transparent;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
-moz-transform:rotateZ(-90deg);
-moz-animation: UpMouth 1s infinite;
-webkit-transform:rotateZ(-90deg);
-webkit-animation: UpMouth 1s infinite;
}.mouthDown{
position: absolute;
left:-60px;
top:-60px;
width: 0px;
height: 0px;
border-right: 60px solid red;
border-top: 60px solid transparent;
border-left: 60px solid transparent;
border-bottom: 60px solid transparent;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
-moz-transform:rotateZ(84deg);
-moz-animation: DownMouth 1s infinite;
-webkit-transform:rotateZ(84deg);
-webkit-animation: DownMouth 1s infinite;
}.eye{
background: #FFF;
width:10px;
height:10px;
position: absolute;
top:-10px;
left:34px;
border-radius:3px;
}
@-moz-keyframes UpMouth{
to{
-moz-transform:rotateZ(-45deg);
-webkit-transform:rotateZ(-45deg);
}
}@-moz-keyframes DownMouth{
to{
-moz-transform: rotateZ(45deg);
}
}@-webkit-keyframes DownMouth{
to{
-webkit-transform: rotateZ(45deg);
}
}@-moz-keyframes startEat{
from{
left: 0px;
}
to{
left: 700px;
}
}@-webkit-keyframes startEat{
from{
left: 0px;
}
to{
left: 700px;
}
}@-moz-keyframes habisFood{
0%{
opacity: 1;
}
7%{
opacity:0;
}
90%{
opacity:0;
}
}@-webkit-keyframes habisFood{
0%{
opacity: 1;
}
7%{
opacity:0;
}
90%{
opacity:0;
}
}
@-moz-keyframes habisFood2{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
25%{
opacity:0;
}
90%{
opacity:0;
}
}@-webkit-keyframes habisFood2{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
25%{
opacity:0;
}
90%{
opacity:0;
}
}
@-moz-keyframes habisFood3{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
28%{
opacity:1;
}
32%{
opacity:0;
}
90%{
opacity:0;
}
}@-webkit-keyframes habisFood3{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
28%{
opacity:1;
}
32%{
opacity:0;
}
90%{
opacity:0;
}
}@-moz-keyframes habisFood4{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
38%{
opacity:1;
}
40%{
opacity:0;
}
90%{
opacity:0;
}
}@-webkit-keyframes habisFood4{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
38%{
opacity:1;
}
40%{
opacity:0;
}
90%{
opacity:0;
}
}
</style>
Hopefully this snippet code on how to create moving pacman using pure CSS3 and HTML5 only can help you
Here also few other relate post that might interested you
