CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel).-CSS-Tutorial-php.cn

CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel).

青灯夜游

Freigeben： 2018-11-07 18:19:52

Original

5610 Leute haben es durchsucht

Dieser Artikel stellt CSS vor, um eine dreidimensionale rotierende Endloskarussell-Animation zu realisieren (Codebeispiel). Ich hoffe, dass er für Sie hilfreich ist.

Im vorherigen Artikel [So implementieren Sie eine unendliche Karussellanimation mit CSS] haben wir die horizontal abgespielte unendliche Karussellanimation vorgestellt (wie unten gezeigt). vorherige Änderung, um verschiedene Karussell-Animationen zu implementieren.

CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel).

Dreidimensionales rotierendes Karussell

Mit einigen kleinen Änderungen können wir verschiedene Polygonformen für Bildräder und größere Bilder verwenden , was zu unterschiedlichen Effekten führt. In diesem Fall ist das Bild doppelt so groß und in einer dreieckigen Anordnung platziert, die weniger Platz beansprucht. Es gibt noch acht identische Fotos in der Sequenz:

CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel).

Mit Firefox sehen Sie, dass auch die Animation läuft. Zusätzlich zum zusätzlichen JavaScript-Code und dem Ersetzen von -webkit durch -moz müssen wir -moz-transform-style:preserve-3d zum #rotator a des CSS hinzufügen wird nicht geerbt (ab Firefox v12).

Dieses Beispiel hat eine leichte Wendung: Wir verschieben das Foto von der Vorderseite der Warteschlange nach hinten. Im ersteren Fall verschieben wir sie vom Ende der Warteschlange nach vorne.

Dazu ändern wir:

target.insertBefore(arr[arr.length-1], arr[0]);

Nach dem Login kopieren

in:

target.appendChild(arr[0]);

Nach dem Login kopieren

Geben Sie den vollständigen Code unten ein:

HTML-Code:

<div id="stage3">
<div id="rotator3" style="-webkit-animation-name: rotator3; -moz-animation-name: rotator3;">
<a href="1.jpg"><img  src="1.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
<a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="CSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel)." ></a>
</div>
</div>

Nach dem Login kopieren

CSS-Code:

 #stage3 {
    margin: 2em auto 1em 50%;
    height: 240px;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0 90px;
    -moz-perspective: 1200px;
    -moz-perspective-origin: 0 90px;
    -ms-perspective: 1200px;
    -ms-perspective-origin: 0 90px;
  }

  #rotator3 a {
    position: absolute;
    left: -151px;
    -moz-transform-style: preserve-3d;
  }
  #rotator3 a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
  }

  #rotator3 a:nth-of-type(1) img {
    -webkit-transform: rotateX(-90deg) translateZ(100px);
    -moz-transform: rotateX(-90deg) translateZ(100px);
    -ms-transform: rotateX(-90deg) translateZ(100px);
  }
  #rotator3 a:nth-of-type(2) img {
    -webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
  }
  #rotator3 a:nth-of-type(3) img {
    -webkit-transform: rotateX(90deg) translateZ(100px);
    -moz-transform: rotateX(90deg) translateZ(100px);
    -ms-transform: rotateX(90deg) translateZ(100px);
  }
  #rotator3 a:nth-of-type(n+4) { display: none; }

  @-webkit-keyframes rotator3 {
    from { -webkit-transform: rotateX(0deg);  }
    to   { -webkit-transform: rotateX(90deg); }
  }
  @-moz-keyframes rotator3 {
    from { -moz-transform: rotateX(0deg);  }
    to   { -moz-transform: rotateX(90deg); }
  }
  @-ms-keyframes rotator3 {
    from { -ms-transform: rotateX(0deg);  }
    to   { -ms-transform: rotateX(90deg); }
  }

  #rotator3 {
    -webkit-transform-origin: 0 101px;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1s;
    -moz-transform-origin: 0 101px;
    -moz-transform-style: preserve-3d;
    -moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -moz-animation-duration: 2s;
    -moz-animation-delay: 1s;
    -ms-transform-origin: 0 101px;
    -ms-transform-style: preserve-3d;
    -ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -ms-animation-duration: 2s;
    -ms-animation-delay: 1s;
  }
  #rotator3:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
  }

Nach dem Login kopieren

JS-Code:

document.addEventListener("DOMContentLoaded", function() {

    var rotateComplete = function(e) {
      with(target.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "";
      }
      target.insertBefore(arr[arr.length - 1], arr[0]);
      setTimeout(function(el) {
        with(el.style) {
          webkitAnimationName = MozAnimationName = msAnimationName = "rotator3";
        }
      }, 0, target);
    };

    var target = document.getElementById("rotator3");
    var arr = target.getElementsByTagName("a");

    target.addEventListener("webkitAnimationEnd", rotateComplete, false);
    target.addEventListener("animationend", rotateComplete, false);
    target.addEventListener("MSAnimationEnd", rotateComplete, false);

  }, false);

Nach dem Login kopieren

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Lernen aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonCSS realisiert eine dreidimensionale, dreidimensionale, rotierende, unendliche Karussellanimation (Codebeispiel).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!