Maison  >  Article  >  interface Web  >  Utiliser CSS pour implémenter une animation de combat de tennis de table

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

php中世界最好的语言
php中世界最好的语言original
2018-05-24 10:55:081830parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn