above example are moving pacman created with fully 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>

Moving Pacman in Pure CSS3
Tagged on:             

Leave a Reply

Your email address will not be published. Required fields are marked *