How To Create A Pac-Man Character Using CSS
Learn How to make PAC-MAN game character using HTML and CSS. Easy Way To create a Character like PAC-MAN Using HTML and CSS. You will easily make the PAC-MAN game character by following my video tutorial, which I have given below. Source Code also available in the post.
How To Make A Pac-Man Character Using HTML And CSS
- 0.0 - 1.00 min : Intro
- 1.00 - 6.0 min: Creating PAC-MAN In HTML and CSS
You can easily make a Pac-Man with CSS by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML and CSS code that I give below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell you all the important points which help you to make a Pac-Man with CSS on our Website. So I recommended you watch the how-to-make Pac-Man in CSS video Tutorial on how can I make this Only using HTML and CSS. This Pure HTML CSS Website is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my Pac-Man video tutorial on how I make this Website. you can use this on your website without any copyright.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <title>PACMAN</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="paceman"> <div class="paceman-eye"></div> <div class="paceman-mouth"></div> <div class="paceman-food"></div> </div> </body> </html>
@charset "utf-8";
/* CSS Document */
*,*:after,*:before{
box-sizing:border-box;
}
body{
background-color:#000000;
color:#FFFFFF;
padding:0px;
margin:0px;
height:100vh;
display:flex;
justify-content:center;
align-items:center;}
.paceman{
width:100px;
height:100px;
border-radius:50%;
background-color:#f2d648;
margin-top:20px;
position:relative;}
.paceman-eye{
width:10px;
height:10px;
border-radius:50%;
background-color:#333333;
position:absolute;
top:20px;
right:40px;
position:absolute;}
.paceman-mouth{
background-color:#000000;
possition:absolute;
width:100%;
height:100%;
clip-path:polygon(100% 74%,44% 48%,100% 21%);
animation-name:eat;
animation-duration:0.7s;
animation-iteration-count:infinite;}
.paceman-food{
position:absolute;
width:15px;
height:15px;
background-color:#FFFFFF;
border-radius:50%;
top:40%;
left:120px;
animation:food 0.7s infinite;}
@keyframes eat{
0%{
clip-path:polygon(100% 74%,44% 48%,100% 21%);
}
25%{
clip-path:polygon(100% 60%,44% 48%,100% 40%);
}
50%{
clip-path:polygon(100% 50%,44% 48%,100% 50%);
}
75%{
clip-path:polygon(100% 59%,44% 48%,100% 35%);
}
100%{
clip-path:polygon(100% 74%,44% 48%,100% 21%);
}
}
@keyframes food {
0%{
transform:translateX(0);
opacity:1;}
100%{
transform:translateX(-50px);
opacity:0;}
}
The Download Links Will Be Shown in 30 Seconds
Comments