Utiliser CSS pour implémenter une animation de combat de tennis de table-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-24 10:55:08

original

1854 Les gens l'ont consulté

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>

Copier après la connexion

Affichage centré :

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

Copier après la connexion

Ajustez le modèle de boîte :

* {
    box-sizing: border-box;
}

Copier après la connexion

Dessinez la table à billes :

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

Copier après la connexion

Dessinez le plan gauche :

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

Copier après la connexion

Laissez le coup gauche Faites-le bouger :

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

Copier après la connexion

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

Copier après la connexion

De même, faites bouger le clap droit :

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

Copier après la connexion

Dessinez le petite balle :

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

Copier après la connexion

Faites bouger la balle :

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

Copier après la connexion

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

Copier après la connexion

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!