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

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>

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

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!