CSS unendlich und kreisförmiger Rotationsbild -Schieberegler

Der Bild -Schieberegler (auch als Karussell bezeichnet) ist überall erhältlich. Es gibt viele CSS -Tricks, um gemeinsame Schieberegler zu erstellen, bei denen das Bild von links nach rechts (oder umgekehrt) gleitet. Viele JavaScript -Bibliotheken erstellen auch schöne Schieberegler mit komplexen Animationen. In diesem Artikel werden wir nichts dieser Dinge tun.

Wir werden durch eine Reihe von Artikeln einige schicke und ungewöhnliche reine CSS -Schieberegler untersuchen. Wenn Sie es satt haben, denselben klassischen Schieberegler zu sehen, sind Sie am richtigen Ort!

CSS Slider -Serie

• Zyklusdrehung Bild Slider (Ihre aktuelle Position)
• Durchsuchen Sie Polaroid -Bilder
• Infinite 3D Slider

Im ersten Beitrag beginnen wir mit dem, was ich als "Schleifenrotationsbild -Schieberegler" nenne:

Es ist cool, oder? Lassen Sie uns den Code analysieren!

HTML -Struktur

Wenn Sie meine Serie über wunderschönes Bilddekor oder CSS -Gitter und benutzerdefinierte Formen verfolgt haben, werden Sie wissen, dass meine erste Regel darin besteht, so wenig HTML wie möglich zu verwenden. Ich habe immer Schwierigkeiten, eine CSS -Lösung zu finden und dann den Code mit vielen <div> und anderen Dingen durcheinander zu bringen. Die gleichen Regeln gelten hier - unser Code ist nichts weiter als eine Reihe von Bildern im Container. <p> Angenommen, wir verwenden vier Bilder: </p> <pre class="brush:php;toolbar:false">&lt;div&gt; &lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt; &lt;/div&gt;</pre> <p> Das ist es! Lassen Sie uns nun in den interessanten Teil des Codes einsteigen. Aber zuerst werden wir uns darauf einlassen, um die Logik der Funktionsweise unserer Schieberegler zu verstehen. </p> <h3 id="Wie-arbeitet-man"> Wie arbeitet man? </h3> <p> Dies ist ein Video, aus dem ich die <code>overflow: hidden cs entfernt habe, damit wir besser verstehen können, wie sich das Bild bewegt: (Das Video sollte hier eingebettet werden, aber da ich das Video nicht bewältigen kann, werde ich es in Text beschreiben) Das Video zeigt vier Bilder, die sich gegen den Uhrzeigersinn über einen großen Kreis drehen. Alle Bilder haben die gleiche Größe (dargestellt durch S in der Abbildung). Beachten Sie den blauen Kreis, der der Kreis ist, der die Zentren aller Bilder schneidet und einen Radius (R) hat. Wir werden diesen Wert für unsere Animation später brauchen. R entspricht 0,707 * S. (Ich werde die geometrischen Berechnungen angesichts der Gleichung überspringen.)

Lassen Sie uns ein paar CSS schreiben!

Wir werden ein CSS -Netz verwenden, um alle Bilder in denselben Bereich übereinander zu platzieren:

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

Bisher ist nichts zu kompliziert. Der schwierige Teil ist die Animation.

Wir haben diskutiert, wie wir einen großen Kreis drehen, aber in Wirklichkeit werden wir jedes Bild einzeln drehen und die Illusion eines großen rotierenden Kreises erzeugen. Definieren wir also eine Animation m und wenden wir sie auf das Bildelement an:

.gallery > img {
  /* 与之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

Der Haupttrick besteht darin, die Zeilen hervorzuheben. Standardmäßig ist die CSS transform-origin Eigenschaft gleich dem Zentrum (oder 50% 50%), wodurch das Bild um seine Mitte dreht, aber wir müssen dies nicht tun. Wir brauchen das Bild, um sich um die Mitte des großen Kreises zu drehen, das unser Bild enthält, so dass der neue Wert von . transform-origin

s Da R gleich 0,707 * s entspricht, können wir sagen, dass R gleich 70,7% der Bildgröße entspricht. Hier ist ein Diagramm, um zu veranschaulichen, wie wir einen Wert von 120,7%erhalten: (Das Bild sollte hier eingebettet werden, aber da ich das Bild nicht verarbeiten kann, werde ich es im Text beschreiben) Das Bild zeigt die geometrische Beziehung zur Berechnung des Transform-Origin-Werts.

Lassen Sie uns die Animation ausführen und sehen, was passiert: (Der Animationseffekt sollte hier eingebettet werden, aber da ich die Animation nicht bewältigen kann, werde ich sie im Text beschreiben) Der Animationseffekt zeigt, dass nur ein Bild sichtbar ist, da alle Bilder miteinander überlagert sind.

Wir müssen die Animation jedes Bildes verzögern, um diese Überlappung zu vermeiden.

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

Die Situation hat sich verbessert!

Wenn wir Überlauf im Container ausblenden, können wir bereits einen Schieberegler sehen, aber wir werden die Animation leicht aktualisieren, damit jedes Bild für kurze Zeit sichtbar ist, bevor wir uns bewegen.

Wir werden unsere Animationsschlüsselframes dazu aktualisieren:

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

Für jeden 90 -° C (360 ° C/4, wobei 4 die Anzahl der Bilder ist) werden wir eine kleine Pause hinzufügen. Jedes Bild bleibt 5%der Gesamtdauer der sichtbaren Dauer (27%-22%, 52%-47%usw.), bevor sie zum nächsten Bild rutschen. Ich werde cubic-bezier() mit der Funktion animation-timing-function aktualisieren, um die Animation schöner zu machen: (Der Animationseffekt sollte hier eingebettet werden, aber da ich die Animation nicht bewältigen kann, werde ich sie weglassen)

Jetzt ist unser Schieberegler perfekt! Nun, fast perfekt, weil wir immer noch die endgültige Nachbesserung fehlen: die farbenfrohen, abgerundeten Grenzen, die sich um unser Bild drehen. Wir können es mit Pseudo-Elementen auf der .gallery -Wrapper erstellen:

.gallery > img {
  /* 与之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

Ich habe einen Kreis mit wiederholten konischen Gradienten als Hintergrund geschaffen, während ich einen Maskierungsstrick verwendete, der nur den Füllbereich anzeigt. Dann wende ich die gleiche Animation an, die für das Bild definiert ist. (Animationseffekte sollten hier eingebettet sein, aber da ich die Animation nicht bewältigen kann, werde ich sie weglassen)

Wir sind fertig! Wir haben einen coolen Schleifenschieberegler:

Fügen wir weitere Bilder hinzu

Es ist gut, vier Bilder zu verwenden, aber es ist noch besser, wenn wir es auf eine beliebige Anzahl von Bildern erweitern können. Dies ist schließlich der Zweck des Bildschiebers. Wir sollten in der Lage sein, n Bilder zu berücksichtigen.

Um dies zu tun, werden wir den Code allgemeiner machen, indem wir SASS einführen. Zunächst definieren wir eine Variable für die Anzahl der Bilder ($ n) und aktualisieren jeden Teil unserer hartcodierten Anzahl von Bildern (4).

Beginnen wir mit Verzögerung:

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

Die Verzögerungsformel lautet (1 - $ i)*Dauer/$ n, die uns die folgende Sass -Schleife gibt:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

Wir können auch die Dauer zu einer Variablen machen, wenn wir wirklich wollen. Aber lass uns die Animation weitermachen:

.gallery {
  padding: calc(var(--s) / 20); /* 此处需要填充 */
  position: relative;
}

.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* 继承相同的填充 */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.gallery::after,
.gallery > img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

Lassen Sie es uns vereinfachen, um das Muster besser anzusehen:

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

Die Schrittgröße zwischen jedem Zustand beträgt 25% -das heißt 100%/4 -wir fügen einen -90 -Grad -Winkel hinzu -dh -360 ° C/4. Dies bedeutet, dass wir die Schleife so schreiben können:

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i) / $n} * 8s);
  }
}

Da jedes Bild 5% der Animation ausmacht, ändern wir dies:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

… und dies:

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

Es ist zu beachten, dass 5% ein Wert sind, den ich für dieses Beispiel ausgewählt habe. Wir können es auch als Variable festlegen, um zu steuern, wie lange jedes Bild sichtbar bleibt. Ich werde dies zur Einfachheit überspringen, aber als Hausaufgaben können Sie dies versuchen und Ihre Implementierung in den Kommentaren teilen!

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

Der letzte Punkt ist, transform-origin zu aktualisieren. Wir brauchen einige geometrische Fähigkeiten. Die Konfiguration ist immer gleich, unabhängig von der Anzahl der Bilder. Wir legen das Bild (kleiner Kreis) in einen großen Kreis und müssen den Wert des Radius R. finden

Möglicherweise möchten Sie keine langweilige geometrische Erklärung. Hier finden Sie also, wie Sie R:

.gallery > img {
  /* 与之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

Wenn wir dies als Prozentsatz ausdrücken, erhalten wir:

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

… Dies bedeutet, dass der transform-origin -Werte gleich:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

Wir sind fertig! Wir haben einen Schieberegler für eine beliebige Anzahl von Bildern!

Fügen wir dort neun Bilder hinzu: (Der Slider -Effekt von neun Bildern sollte hier eingebettet sein, aber da ich nicht mit Bildern und Animationen umgehen kann, werde ich es weglassen)

Fügen Sie so viele Bilder hinzu und aktualisieren Sie die $ n Variable mit der Gesamtzahl der Bilder.

Zusammenfassung

Mit mehreren Tricks der Verwendung von CSS -Transformation und Standardgeometrie haben wir einen schönen Schleifen ohne viel Code erstellt. Das Coole an diesem Schieberegler ist, dass wir uns nicht die Mühe machen müssen, das Bild zu kopieren, um die unendliche Animation zu behalten, weil wir einen Kreis haben. Nach der vollen Rotation werden wir zum ersten Bild zurückkehren!