Implementierungsbeispiel für den CSS-Animationsball, der auf eine Wand trifft und einen Rückpralleffekt hat

Der Ball springt im Allgemeinen ab, nachdem er eine Wand getroffen hat, und der Reflexionswinkel ist der Einfallswinkel

Tatsächlich ist es sehr einfach, CSS3 zu verwenden, um dies zu erreichen Wirkung.

Lassen Sie uns zunächst die Bewegung des Balls aufschlüsseln: horizontale Bewegung und vertikale Bewegung.

Wenn sich der Ball in die untere rechte Richtung bewegt und auf die darunter liegende Wand trifft, erfährt der Ball aufgrund der Kollision eine Kraft senkrecht zur Wand (d. h. eine nach oben gerichtete Kraft). In diesem Fall wird die horizontale Bewegung nicht beeinflusst. Es wird nur die vertikale Bewegung beeinflusst. Wenn der Ball mit der oberen und unteren Wand kollidiert, muss er daher nur die Richtung der Auf- und Abwärtsbewegung ändern, und die Links- und Rechtsbewegung bleibt unverändert. Wenn der Ball mit der linken und rechten Wand kollidiert, bleibt die Bewegung unverändert. Es muss nur die Richtung der horizontalen Bewegung geändert werden, die vertikale Richtung muss nicht geändert werden.

Mit dieser Idee können Sie mit der Verwendung von CSS3-Animationen beginnen, um zu erkennen, wie der Ball zurückprallt, wenn er kollidiert.

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

Die Farbe des Balls verwendet den Pfad in CSS3-Verlauf, damit der Ball dreidimensionaler aussieht.

Das obige ist der detaillierte Inhalt vonImplementierungsbeispiel für den CSS-Animationsball, der auf eine Wand trifft und einen Rückpralleffekt hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!