Using CSS to implement table tennis fighting animation

This time I will bring you the use of CSS to realize table tennis fighting animation, and what are the precautions about using CSS to realize table tennis fighting animation. The following is a practical case, let's take a look.

Code Interpretation

Define dom, the container contains left racket, small ball and right racket:

<p class="court">
    <p class="left-paddle"></p>
    <p class="ball"></p>
    <p class="right-paddle"></p>
</p>

Centered display:

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(silver, dimgray);
}

Adjustment Box model :

* {
    box-sizing: border-box;
}

Draw the ball case:

.court {
    width: 20em;
    height: 20em;
    color: white;
    border: 1em solid currentColor;
}

Draw the left racket:

.court {
    position: relative;
}
.left-paddle
    width: 1em;
    height: calc(50% - 1em);
    background-color: currentColor;
    position: absolute;
    top: 1em;
    left: 1em;
}

Let the left racket move:

.left-paddle {
    animation: left-moving 1s linear infinite alternate;
}
@keyframes left-moving {
    to {
        transform: translateY(100%);
    }
}

Similarly, draw the right racket:

.right-paddle
    width: 1em;
    height: calc(50% - 1em);
    background-color: currentColor;
    position: absolute;
    top: 1em;
    left: 1em;
    bottom: 1em;
    right: 1em;
}

Similarly, draw the right racket:

.right-paddle {
    animation: right-moving 1s linear infinite alternate;
}
@keyframes right-moving {
    to {
        transform: translateY(-100%);
    }
}

Draw the ball:

.ball {
    width: 100%;
    height: 1em;
    border-left: 1em solid currentColor;
    position: absolute;
    left: 2em;
    top: calc(50% - 1.5em);
}

Let the ball move:

.ball {
    animation: bounce 1s linear infinite alternate;
}
@keyframes bounce {
    to {
        left: calc(100% - 3em);
    }
}

Finally, refactor the left and right shooting code and merge the common attributes:

.left-paddle,
.right-paddle {
    width: 1em;
    height: calc(50% - 1em);
    background-color: currentColor;
    position: absolute;
    animation: 1s linear infinite alternate;
}
.left-paddle {
    top: 1em;
    left: 1em;
    animation-name: left-moving;
}
.right-paddle {
    bottom: 1em;
    right: 1em;
    animation-name: right-moving;
}

You’re done!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Chart.js lightweight chart library use case analysis

https usage in Node.js Case Analysis

The above is the detailed content of Using CSS to implement table tennis fighting animation. For more information, please follow other related articles on the PHP Chinese website!