Maison > interface Web > tutoriel CSS > le corps du texte

Exemple de mise en œuvre d'une balle d'animation CSS frappant un mur et d'un effet de rebond

黄舟
Libérer: 2017-09-29 10:39:07
original
3798 Les gens l'ont consulté

La balle rebondira généralement après avoir heurté un mur, et l'angle de réflexion = l'angle d'incidence

En fait, il est très simple d'utiliser CSS3 pour y parvenir ; effet.

Tout d’abord, décomposons le mouvement de la balle : mouvement horizontal et mouvement vertical.

Lorsque la balle se déplace dans la direction inférieure droite, si elle heurte le mur en dessous, alors en raison de la collision, la balle recevra une force perpendiculaire au mur (c'est-à-dire une force vers le haut). Dans ce cas, le mouvement horizontal ne sera pas affecté. Seul le mouvement vertical est affecté. Par conséquent, lorsque la balle entre en collision avec les murs supérieur et inférieur, il lui suffit de changer la direction du mouvement de haut en bas, et les mouvements de gauche et de droite restent inchangés. Par analogie, lorsque la balle entre en collision avec les murs de gauche et de droite, il suffit de changer la direction du mouvement horizontal et la direction verticale n'a pas besoin d'être modifiée.

Avec cette idée, vous pouvez commencer à utiliser l'animation CSS3 pour réaliser que la balle rebondit lorsqu'elle entre en collision.

1.html :


1 <p id="box">
2       <p id="ball-box">
3            <p id="ball"></p>
4       </p>
5 </p>
Copier après la connexion

2.css :

#box {
    width: 300px;
    height: 150px;
    border: 1px solid #7aa4c0;
}
#ball-box {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    animation: bouncey linear 3s infinite;
    -webkit-animation: bouncey linear 3s infinite;
}
#ball {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: -webkit-radial-gradient(circle, #ddecee, #0377db);
    background: -o-radial-gradient(circle, #ddecee, #0377db); 
    background: -moz-radial-gradient(circle, #ddecee, #0377db); 
    background: radial-gradient(circle, #ddecee, #0377db); 
    animation: bouncex linear 5s infinite;
    -webkit-animation: bouncex linear 3s infinite;
}
@keyframes bouncey
{
    0%,100% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
        }
    50% {
        transform:translateY(130px);
        -webkit-transform:translateY(130px);
        }
}
@keyframes bouncex
{
    0%,100% {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
        }
    50% {
        transform:translateX(280px);
        -webkit-transform:translateX(280px);
        }
}

css Code
Copier après la connexion

La couleur de la balle utilise le chemin dans css3 Dégradé pour rendre la balle plus tridimensionnelle.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal