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!