Erstellen Sie fallende Objekte in CSS3

Beispiel für die Verwendung von CSS zum Erstellen fallender Objekte mit absoluter Positionierung und CSS3-Animation

Snow Example

CSS

Wir hatten einige nette Kommentare zu einem Weihnachtsthema, das wir vor einem Jahr auf unserer Website hatten, also beschlossen wir, den Code zu teilen. Das Design verwendete nur CSS zum Gestalten der Seiten und funktionierte daher auf allen Browsern, ohne dass Plugins erforderlich waren.

Was sind CSS-Animationen?

Eine Animation lässt ein Element allmählich von einem Stil in einen anderen wechseln.

Sie können beliebig viele CSS-Eigenschaften ändern, so oft Sie möchten.

Um die CSS-Animation zu verwenden, müssen Sie zunächst einige Keyframes für die Animation angeben.

Keyframes halten fest, welche Stile das Element zu bestimmten Zeiten haben wird.

Es hat keinen Sinn, einen Artikel zu wiederholen, der bereits sehr gut erklärt ist, daher gibt es einen Link zu der Seite unten.

Dies ist der von uns verwendete HTML- und CSS-Code.

Verwenden von CCS3-Animation auf der W3C-Website

HTML & CSS

<style type="text/css">.snowContainer{width: 100%; height: 300px; background-color: black; overflow: hidden; position: relative;}.snowExample{position: absolute; top: -450px; opacity: .5; text-align: center;animation: SnowExampleSlide ease-in infinite;-webkit-animation: SnowExampleSlide ease-in infinite;-moz-animation: SnowExampleSlide ease-in infinite;-webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;animation-fill-mode: forwards;}@keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-webkit-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-moz-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}</style><div class="snowContainer"><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 0s;animation-delay: 0s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 3s;animation-delay: 3s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 0s;animation-delay: 0s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /></div>

CSS

In dem Beispiel gibt es vier kleinere Bilder und zwei größere, die sich mit unterschiedlichen Geschwindigkeiten bewegen, was das Auge dazu bringt, zu glauben, dass sie näher sind.

Sie müssen auch ein gewisses Maß an Mathematik anwenden, um die Positionierung und das Timing für den oberen Teil richtig zu machen, zum Beispiel hat das hier verwendete Bild 1198 x 999 Pixel in einem Div von 300 Pixeln Höhe.

Die Bildgröße auf dem Bildschirm ist auf eine Breite von 400 Pixel eingestellt, sodass die Position mindestens bei (400/1198)*999=333 Pixel über dem oberen Rand beginnen und auf die neue Höhe des Bilds plus die Div-Höhe 333+300 verschoben werden muss =633.

Es gibt auch ein Beispiel dafür, wie ein Objekt zentriert wird, wenn die Position auf absolut eingestellt ist. Sie werden auf 50 % links eingestellt, und dann wird der linke Rand auf die halbe Objektbreite eingestellt.