CSS réalise l'effet d'animation du mouvement parabolique de la balle (code)

Le contenu de cet article concerne l'effet d'animation (code) de la réalisation du mouvement parabolique de la balle avec CSS. Il a une certaine valeur de référence. J'espère que les amis dans le besoin pourront s'y référer. vous sera utile.

Pour qu'un objet obtienne un mouvement parabolique, il est physiquement divisé en mouvement horizontal (vitesse uniforme) et mouvement vertical (accélération) ; le même principe s'applique à l'utilisation de CSS3. un calque contrôle l'horizontale et un calque contrôle la verticale ; dans CSS3, la vitesse peut être définie via la courbe de transition de Bézier ou la fonction de synchronisation d'animation. La pente de la courbe de Bézier est la vitesse de mouvement de l'objet, donc. différents réglages sont définis pour le mouvement vertical. La formule de Bessel peut être utilisée pour obtenir divers mouvements courbes tels que le lancer vers le haut, le lancer à plat et la torsion.

Implémente principalement la partie HTML suivante avec deux couches de divs, une contrôlant le mouvement horizontal et une contrôlant le mouvement vertical

    <div class="wraper">         <!--控制竖直运动-->
        <div class="item"></div> <!--控制水平运动-->
    </div>
    <div class="item2"></div>

C'est également relativement simple en CSS Définir directement le mouvement horizontal et vertical. animations et paramètres d'animation

    *{margin: 0;padding: 0}  /*简单的浏览器兼容*/
    /*设置初始样式*/
    .item, .item2 {
        width:20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        top: 50px;
        left: 20px;
        background-color: #00aa00;
        border-radius: 50%;
    }
    /*竖直运动*/
    .wraper {
        animation: vertical-animation 2s  .5s 2;
        animation-timing-function: cubic-bezier(.11,-.33,.55,.11);
    }
    /*水平运动*/
    .wraper .item {
        animation: hor-animation 2s linear .5s 2;
    }
    @-moz-keyframes hor-animation {
        0% { transform: translateX(0px); }
        100% { transform: translateX(400px); }
    }
    @-webkit-keyframes hor-animation {
        0% { transform: translateX(0px);     }
        100% { transform: translateX(400px); }
    }
    @-moz-keyframes vertical-animation {
        0% { transform: translateY(0px);  }
        100% { transform: translateY(400px); }
    }
    @-webkit-keyframes vertical-animation {
        0% { transform: translateY(0px);     }
        100% { transform: translateY(400px); }
    }

La principale chose utilisée est la pente de la courbe de Bézier, qui est la vitesse de déplacement de l'objet. Différents mouvements de courbe peuvent être dessinés selon différentes pentes

Recommandations associées ：

html5 simule le mouvement de lancer à plat (simulant le processus de mouvement de lancer à plat d'une petite balle)_html5 compétences pédagogiques

Comment utilisez du CSS pur pour implémenter des effets d'animation en sablier

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!