Utiliser CSS pour implémenter une animation de combat de tennis de table

Cette fois, je vais vous apporter les précautions sur la façon d'utiliser CSS pour réaliser une animation de combat de tennis de table. Jetons un coup d'œil à ce qui suit.

Interprétation du code

Définissez dom, le conteneur contient la raquette gauche, la petite balle et la raquette droite :

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

Affichage centré :

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

Ajustez le modèle de boîte :

* {
    box-sizing: border-box;
}

Dessinez la table à billes :

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

Dessinez le plan gauche :

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

Laissez le coup gauche Faites-le bouger :

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

De même, dessinez le clap droit :

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

De même, faites bouger le clap droit :

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

Dessinez le petite balle :

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

Faites bouger la balle :

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

Enfin, refactorisez le code de tir gauche et droit et fusionnez les attributs communs :

.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;
}

Vous avez terminé !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Analyse de cas d'utilisation de la bibliothèque de graphiques légère Chart.js

Utilisation de https dans l'analyse de cas Node.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!