CSS Animation Ping Pong Game Design

Hello friends, in this blog you will learn how to make ping pong game design using html and CSS. If you are all in Shutting or you know html and CSS well then you will be able to create this type of design which I have shared

You must know what ping pong game is also known as table tennis. This is a game that is played by two or four players taking a rocket and throwing it back and forth behind a table with a light ball that you will learn to make it a ping pong game using html and CSS.

As you can see in this image, this is a ping pong game designed using html and CSS and a light ball designed by CSS animation that is jumping on the table and animation like the other one. So, you will learn how to make this ping pong game easily.

If you do not understand or are having any difficulties in understanding, then you can understand it by watching its video. We have given the tutorial of this ping pong game below, you can easily understand it by clicking on it.

Video Tutorial Of CSS Animation Ping Pong Game Design

I hope you have understood by watching this tutorial and how the code of this ping pong game has been written, how to style it in css, you are new in this field and you are getting information about html and css, so you This tutorial will help you practice

CSS Animation Ping Pong Game Design Source Codes

First of all we know about its html. We have taken a div inside the body tag named class pingpong and undar 5 div of this class pingpong is taken and two span is the first div of these 5 div whose class name Another five div is taken inside the table and the same table, and the class names of these five div are all kept separately, whose class names are line, net-top, net-middle, net-bottom and net-shadow.

And the class table is taken below the div and the class name of this div is c1. Another div is taken inside this c1, whose class name is b1. Similarly one div is taken inside the other three div and they all have different class names. Given and two spans have been taken below these five divs, whose class name is ping and pong, text is written inside this class which shows ping and pong on the display.

You know about the style of css after this html tag. First we made the body background-color font-size font-family text-align color and overflow hidden. After doing this, position the class ping top left and opacity Zero was given the name of animation which the ball is animation towards each other, similarly pong also wrote style and named animation.

div class table table has also been sized by css. The table of the image has been designed with a nice shadow on which the ball jumps and goes towards the ping pong text. You are learning html and css and have learned that your You will be able to create this type of design in the way that this ping pong game is designed.

If you like the design of this ping pong game, you can get the source code of this game, in which we have given two files, one htlm code file and the other css code file. Copy the code inside the textarea and paste it in the file of your system, which will help you to understand with this code. Which you will be able to design this type of game in css.

HTML CODE FILE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="pigpog.css" rel="stylesheet">
</head>
<body>
<div class="pingpong">
    <div class="table">
        <div class="line">
</div>
<div class="net-top">
</div>
<div class="net-middle">
</div>
<div class="net-bottom">
</div>
<div class="net-shadow">
</div>
</div>
<div class="c1">
        <div class="b1">
</div>
</div>
<div class="c2">
        <div class="b2">
</div>
</div>
<div class="c3">
        <div class="b3">
</div>
</div>
<div class="c4">
        <div class="b4">
</div>
</div>
<span class="ping">PING</span>
    <span class="pong">PONG</span>
</div>
</body>
</html>

CSS CODE FILE :

body {
    background: #7FA3C7;
    font-family: 'Chewy', cursive;
    text-align: center;
    font-size: 50px;
    color: white;
    overflow: hidden;
}
.ping {
    position: absolute;
    top: 200px;
    left: -80px;
    opacity: 0;
    animation: animPing 2s linear infinite; 
}
.pong {
    position: absolute;
    top: 200px;
    right: -90px;
    opacity: 0;
    animation: animPing 2s 1s linear infinite; 
}
@keyframes animPing {
    0% {
        opacity: 0.8;
    }
    35%, 100% {
        opacity: 0;
    }
}
.pingpong {
    margin: 0 auto;
    margin-top: 100px;
    position: relative;
    width: 380px;
    height: 150px;   
}
.table {
    position: absolute;
    top: 210px;
    left: 0px;
    border-bottom: 80px solid #fff;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    height: 0;
    width: 220px;
}
.table:before {
        display: block;
        content: ' ';
        position: absolute;
        top: 1px;
        left: -78px;
        border-bottom: 78px solid #2E4E80;
        border-left: 78px solid transparent;
        border-right: 78px solid transparent;
        height: 0;
        width: 220px;
    }
    .table:after {
        display: block;
        content: ' ';
        position: absolute;
        top: 80px;
        left: -80px;
        height: 20px;
        width: 380px;
        background: #192A44;
    }
    .line {
        position: absolute;
        width: 280px;
        top: 30px;
        left: -30px;
        border-bottom: solid 1px white;
    }
    
    .net-top {
        position: absolute;
        top: -25px;
        margin-left: 106px;
        margin-right: 106px;
        width: 8px;
        height: 25px;
        background: #333;
    }
        .net-top:before {
            display: block;
            content: " ";
            position: absolute;
            top: -3px;
            width: 4px;
            border-left: solid 2px transparent;
            border-right: solid 2px transparent;
            border-bottom: solid 3px rgb(115, 115, 115);            
        }
        .net-middle {
        position: absolute;
        top: -20px;
        left: 109px;
        width: 2px;
        height: 80px;
        background: white;
    }
    .net-bottom {
        position: absolute;
        top: 65px;
        left: 104px;
        width: 12px;
        height: 43px;
        background: #333;      
        z-index: 1;
    }
    .net-bottom:before {
            display: block;
            content: " ";
            position: absolute;
            
            top: -8px;
            width: 10px;
            border-left: solid 1px transparent;
            border-right: solid 1px transparent;
            border-bottom: solid 8px rgb(115, 115, 115);            
        }
        .net-shadow {
        position: absolute;
        left: 111px;
        border-bottom: 80px solid rgba(0, 0, 0, 0.2);
        border-right: 30px solid transparent;
        height: 0;
        width: 20px;
    }

    .c1, .c2 {
    position: absolute;
    width: 300px;
    height: 300px;
}
.c3, .c4 {
    position: absolute;
    width: 150px;
    height: 150px;
}
.c1 {
    top: 180px;
    left: 0;
    animation: rotateC1 2s linear infinite; 
}
.c2 {
    top: 180px;
    left: 80px;
    animation: rotateC2 2s linear infinite;
}
.c3 {
    top: 220px;
    left: -10px;
    animation: rotateC3 2s linear infinite;
}
.c4 {
    top: 220px;
    right: -10px;
    animation: rotateC4 2s linear infinite;
}
@keyframes rotateC1 {
    0% {
        opacity: 1;
        transform: rotate(-44deg);  
    }
    35% {
        opacity: 1;
        transform: rotate(52deg);
    }
    36%, 100% {
        opacity: 0;
    }
}
@keyframes rotateC2 {
    0%, 49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: rotate(44deg); 
    }
    85% {
        opacity: 1;
        transform: rotate(-52deg); 
    }
    86%, 100% {
        opacity: 0;
    }
}
@keyframes rotateC3 {
     0%, 84% {
        opacity: 0;
    }
    85% {
        opacity: 1;
        transform: rotate(39deg);
    }
    100% {
        opacity: 1;
        transform: rotate(-15deg);
    }
}
@keyframes rotateC4 {
    0%, 34% {
        opacity: 0;
    }
    35% {
        opacity: 1;
        transform: rotate(-39deg);
    }
    50% {
        opacity: 1;
        transform: rotate(15deg);
    }
    51%, 100% {
        opacity: 0;
    }
}

.b1, .b2, .b3, .b4 {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 10px;
}
.b1, .b2 {    
    top: -5px;
    left: 145px;
}
.b3, .b4 {    
    top: -5px;
    left: 70px;
}

Video Tutorial Of CSS Animation Ping Pong Game Design

HTML CODE FILE :

CSS CODE FILE :

1 Comments

Post a Comment

About Us

Contact Form

CSS Animation Ping Pong Game Design

Video Tutorial Of CSS Animation Ping Pong Game Design

HTML CODE FILE :

CSS CODE FILE :

You might like

1 Comments

Post a Comment

Contact Form