Pure CSS3 erstellt realistische mehrschichtige Wolkenanimations-Spezialeffekte

Kurzes Tutorial

Dies ist ein sehr cooler, reiner CSS3-realistischer, mehrschichtiger Wolkenanimations-Spezialeffekt. Dieser Spezialeffekt verwendet mehrere transparente Wolken-PNG-Bilder als Hintergrundbilder und verwendet CSS-Animationen, um den horizontal schwebenden Animationseffekt von Wolken zu erzeugen.

Quellcode anzeigen Laden Sie das Plug-in herunter

　So verwenden Sie es

　HTML-Struktur

Die HTML-Struktur des mehrschichtigen Wolkenanimationseffekts ist sehr einfach: Verwenden Sie einen p.sky als Hintergrundebene von die Antenne und platzieren Sie darin mehrere Untertitel e388a4556c0f65e1904146cc1a846beeAls Cloud-Container.

<p class="sky">
    <p class="clouds_one"></p>
    <p class="clouds_two"></p>
    <p class="clouds_three"></p>
</p>

CSS-Stil

Als Himmelshintergrund legt das .sky-Element eine feste Höhe fest, verwendet die relative Positionierung und verwendet overflow:hiden zum Ausblenden Elemente außerhalb des Bereichs. Stellen Sie zunächst die Himmelsfarbe auf ein helleres Blau ein (#007fd5). Anschließend wird eine sky_background-CSS3-Animation für den Himmelshintergrund festgelegt. Diese Animation ändert die Farbe des Himmelshintergrunds innerhalb von 50 Sekunden. Die Animations-Timing-Funktion der Animation ist einfach und die Iteration des Animation Gibt an, wie oft „animation-iteration-count“ eine Endlosschleife durchführt.

In diesem Spezialeffekt wird jedes Element mit dem Attribut „transform: Translate3d(0, 0, 0)“ festgelegt um den 3D-Effekt der GPU zu aktivieren und die Anzeigeleistung zu verbessern.

.sky {
    height: 480px;
    background: #007fd5;
    position: relative;
    overflow: hidden;
    -webkit-animation: sky_background 50s ease-out infinite;
    -moz-animation: sky_background 50s ease-out infinite;
    -o-animation: sky_background 50s ease-out infinite;
    animation: sky_background 50s ease-out infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5
    }
    50% {
      background: #000;
      color: #a3d9ff
    }
    100% {
      background: #007fd5;
      color: #007fd5
    }
  }

Wolkenschicht 1 verwendet das erste Wolken-PNG-Bild als Hintergrundbild, mit absoluter Positionierung, linksbündig relativ zum Himmelscontainer. Die Höhe entspricht dem Himmel und die Breite beträgt das Dreifache des Himmelscontainers. und führen Sie eine cloud_one CSS3-Animation durch. Diese Animation ändert die linke Eigenschaft der Wolkenebene, sodass sich die Wolken horizontal bewegen.

.clouds_one {
    background: url("img/cloud_one.png");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_one 50s linear infinite;
    -moz-animation: cloud_one 50s linear infinite;
    -o-animation: cloud_one 50s linear infinite;
    animation: cloud_one 50s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }

Die CSS3-Animationen von Cloud 2 und Cloud 3 ähneln grundsätzlich denen von Cloud 1, außer dass die Animationsdauer gleich ist Anders ausgedrückt: Die Dauer von Wolke 1 beträgt 50 Sekunden, die Dauer von Wolke 2 beträgt 75 Sekunden und die Dauer von Wolke 3 beträgt 100 Sekunden. Auf diese Weise ist die Animationszeit jeder Wolkenschicht unterschiedlich und es werden einige visuelle Hintergrundeffekte erzielt.

Das obige ist der detaillierte Inhalt vonPure CSS3 erstellt realistische mehrschichtige Wolkenanimations-Spezialeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!