Inhaltsverzeichnis
1. Struktur der HTML
2. Stil mit Flexbox und Animation
3. Erstellen
4. Machen Sie es reaktionsschnell
5. Optional: Pause auf Schwebe
Tipps für bessere Ergebnisse
Heim Web-Frontend Front-End-Fragen und Antworten So erstellen Sie einen reaktionsschnellen Testimonial Slider mit CSS

So erstellen Sie einen reaktionsschnellen Testimonial Slider mit CSS

Aug 12, 2025 am 09:42 AM
css

Es ist möglich, einen reaktionsschnellen automatischen Karussellschieber mit reinem CSS zu erstellen. Kombinieren Sie einfach die HTML -Struktur, das Flexbox -Layout und die CSS -Animation. 2. Erstellen Sie zuerst einen semantischen HTML -Container, der mehrere Empfehlungsbegriffe enthält. IITEM enthält Referenzinhalt und Autoreninformationen. 3. Implementieren Sie die horizontale Anordnung, indem Sie die übergeordnete Containeranzeige einstellen: Flex, Breite: 300% (drei Folien) und Überlauf anwenden: versteckt. 4. Verwenden Sie @KeyFrames, um eine Translatex -Transformation von 0% auf -100% zu definieren und mit Animation ein nahtloses automatisches Scrollen zu erreichen: Linear infinite 15S. 5. Fügen Sie Medienabfrage hinzu, um die Schriftart, den Abstand und den Animationszyklus auf 20 Sekunden zu erweitern, wenn sie unter 768px und 480px sind, um das kleine Bildschirmerlebnis zu verbessern. 6. Optional wird eine Hover-Pause erreicht, indem Animations-Play-Staat festgelegt wird: Pause von: Hover-Status. 7. Um die Leistung zu verbessern, können Sie den Willenswechsel hinzufügen: Transformation, und es wird empfohlen, ARIA-Tags hinzuzufügen, um die Zugänglichkeit zu verbessern. Schließlich erhält es eine leichte, glatte und gekreuzte kompatible reine CSS-Empfehlungskomponente.

So erstellen Sie einen reaktionsschnellen Testimonial Slider mit CSS

Das Erstellen eines reaktionsschnellen Testimonial Sliders mit CSS erfordert kein JavaScript, wenn Sie ihn einfach halten. Die CSS -Animationen, Flexbox und Medienabfragen. So können Sie eine erstellen, die auf Geräten gut funktioniert.

So erstellen Sie einen reaktionsschnellen Testimonial Slider mit CSS

1. Struktur der HTML

Beginnen Sie mit einer sauberen und semantischen HTML -Struktur. Verwenden Sie für jedes Testimonial einen Container für den Schieberegler und einzelne Elemente.

 <div class = "Testimonial-Slider">
  <div class = "Slide">
    <p class = "quote"> "Dieses Produkt hat die Art und Weise, wie ich arbeite, geändert. Sehr empfohlen!" </p>
    <p class = "Autor"> - Jane Doe </p>
  </div>
  <div class = "Slide">
    <p class = "quote"> "herausragende Unterstützung und erstaunliche Qualität. Jeden Cent wert." </p>
    <p class = "Autor"> - John Smith </p>
  </div>
  <div class = "Slide">
    <p class = "quote"> "Einfach, elegant und effektiv. Genau das, was ich brauchte." </p>
    <p class = "Autor"> - Alex Brown </p>
  </div>
</div>

2. Stil mit Flexbox und Animation

Verwenden Sie CSS Flexbox, um die Folien in einer Reihe auszurichten und sie automatisch zu scrollen.

So erstellen Sie einen reaktionsschnellen Testimonial Slider mit CSS
 .Testimony-Slider {
  Anzeige: Flex;
  Breite: 100%;
  Überlauf: versteckt;
  Polsterung: 20px 0;
  Kastengrößen: Border-Box;
}

.gleiten {
  Flex: 0 0 Auto;
  Breite: 100%;
  Polsterung: 20px;
  Text-Align: Mitte;
  Hintergrund: #f9f9f9;
  Border-Radius: 8px;
  Rand: 0 10px;
  Deckkraft: 0,6;
  Transformation: Skala (0,95);
  Übergang: Alle 0,3s leichten;
}

.Slide: Hover {
  Deckkraft: 1;
  Transformation: Skala (1);
}

.Slide p.quote {
  Schriftstil: kursiv;
  Randboden: 10px;
  Farbe: #333;
}

.Slide P.Author {
  Schriftgewicht: fett;
  Farbe: #007acc;
}

3. Erstellen

Lassen Sie die Folien automatisch mit @keyframes und animation scrollen.

 .Testimony-Slider {
  Anzeige: Flex;
  Breite: 300%; / * Basierend auf der Anzahl der Folien einstellen *//
  Animation: Scroll 15S Linear Infinite;
}

@keyframes scroll {
  0% {
    Transformation: Translatex (0);
  }
  100% {
    Transformation: Translatex (-100%);
  }
}

Hinweis: Wenn Sie 3 Folien haben und jeweils 100% Breite einnehmen, beträgt der Gesamtbehälter 300%. Um eine volle Folie nach links zu scrollen, übersetzen Sie sich um -100%.

So erstellen Sie einen reaktionsschnellen Testimonial Slider mit CSS

4. Machen Sie es reaktionsschnell

Verwenden Sie Medienabfragen, um das Layout- und Animations -Timing für kleinere Bildschirme anzupassen.

 @media (max-Width: 768px) {
  .gleiten {
    Polsterung: 15px;
    Schriftgröße: 0,9EM;
  }

  .Slide p.quote {
    Schriftgröße: 0,95EM;
  }
}

@media (max-Width: 480px) {
  .gleiten {
    Polsterung: 10px;
    Rand: 0 5px;
  }

  .Slide p.quote {
    Schriftgröße: 0,85EM;
  }

  .Slide P.Author {
    Schriftgröße: 0,9EM;
  }

  .Testimony-Slider {
    Animation: Scroll 20S Linear Infinite;
  }
}

5. Optional: Pause auf Schwebe

Verbessern Sie UX, indem Sie den Schieberegler unterhalten, wenn Benutzer darüber schweben.

 .Testimial-Slider: Hover {
  Animationsspielstaat: Pause;
}

Tipps für bessere Ergebnisse

  • Weitere Folien hinzufügen? Passen Sie die Gesamtbreite (z. B. 400% für 4 Folien) an und aktualisieren Sie die Keyframes ( translateX(-300%) ).
  • Willst du manuelle Steuerelemente? Das würde JavaScript erfordern, aber für reine CSS funktioniert Auto-Play großartig.
  • Glätte: Verwenden Sie will-change: transform den .testimonial-slider , um eine bessere Leistung zu erzielen.
  • Barrierefreiheit: Erwägen Sie, Aria -Labels oder eine versteckte Liste für Bildschirmleser hinzuzufügen.

Grundsätzlich können Sie mit Flexbox, Keyframe-Animationen und Responsive-Design einen reibungslosen, mobilfreundlichen Testimonial-Schieberegler mit nur HTML und CSS erstellen. Es ist leicht, schnell und funktioniert in allen modernen Browsern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen reaktionsschnellen Testimonial Slider mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1517
276
Was sind die Apps für virtuelle Währungshandel? _Die Top Ten empfohlene offizielle Apps Virtual Currency Trading Apps im Jahr 2025 Was sind die Apps für virtuelle Währungshandel? _Die Top Ten empfohlene offizielle Apps Virtual Currency Trading Apps im Jahr 2025 Aug 08, 2025 pm 06:42 PM

1. Binance ist bekannt für sein riesiges Transaktionsvolumen und die reichhaltigen Handelspaare. Es bietet diversifizierte Handelsmodelle und perfekte Ökosysteme. Es gewährleistet auch die Sicherheit von Benutzeranlagen über SAFU -Fonds und mehrere Sicherheitstechnologien und erhält den konformen Vorgängen von großer Bedeutung. 2. OKX Ouyi bietet eine breite Palette von Handelsdiensten für digitale Asset und einheitliche Handelskonto -Modelle, bereitet das Web3 -Feld aktiv bereit und verbessert die Sicherheit und Erfahrung der Transaktion durch strenge Risikokontrolle und Benutzerausbildung. 3.. Gate.io Sesam öffnet die Tür und verfügt über eine gute Währungsgeschwindigkeit und eine reichhaltige Währung, bietet diversifizierte Handelsinstrumente und Wertschöpfungsdienste, nimmt mehrere Sicherheitsüberprüfungsmechanismen an und hält sich an die Transparenz von Asset-Reserven zur Verbesserung des Benutzervertrauens. V.

So verwenden Sie VW- und VH -Einheiten in CSS So verwenden Sie VW- und VH -Einheiten in CSS Aug 07, 2025 pm 11:44 PM

VW- und VH -Einheiten erreichen reaktionsschnelles Design, indem sie Elementgrößen mit Ansichtsfenster und Höhe in Verbindung bringen. 1 VW entspricht 1% der Ansichtsfensterbreite, und 1 VH entspricht 1% der Ansichtsfensterhöhe; häufig im Vollbildbereich, reaktionsschnellen Schriftarten und elastischen Abstand verwendet; 1. Verwenden Sie im Vollbildbereich 100VH oder besser 100DVH, um den Einfluss der Mobile Browser -Adressleiste zu vermeiden. 2. Responsive Schriftarten können mit 5 VW begrenzt und mit einer Klemme (1,5REM, 3VW, 3REM) in Kombination der minimalen und maximalen Größe begrenzt werden. 3. Elastischer Abstand wie Breite: 80VW, Rand: 5VHAUTO, Polsterung: 2VH3VW, kann das Layout anpassungsfähig machen; Achten Sie auf Kompatibilität, Zugänglichkeit und Inhaltskonflikte für mobile Geräte. Es wird empfohlen, zuerst DVH zu verwenden.

So erstellen Sie eine vertikale Linie mit CSS So erstellen Sie eine vertikale Linie mit CSS Aug 11, 2025 pm 12:49 PM

Verwenden Sie einen DIV mit Rand, um schnell vertikale Linien zu erstellen und Stile und Höhen zu definieren, indem Sie randlinks und Höhe einstellen. 2. Verwendung :: vor oder :: Nach Pseudoelementen, um vertikale Linien ohne zusätzliche HTML-Tags hinzuzufügen, die für die dekorative Trennung geeignet sind; 3. In Flexbox -Layout können adaptive vertikale Trennwände zwischen elastischen Behältern erreicht werden, indem die Breite und die Hintergrundfarbe der Trennklasse festgelegt werden. 4. Fügen Sie in CSSGrid vertikale Linien als unabhängige Spalten (z. B. Autowidth -Spalten) in das Gitterlayout ein, das für reaktionsschnelles Design geeignet ist. Die am besten geeignete Methode sollte gemäß dem spezifischen Layout ausgewählt werden, um sicherzustellen, dass die Struktur einfach und leicht zu warten ist.

So verwenden Sie die Filtereigenschaft in CSS So verwenden Sie die Filtereigenschaft in CSS Aug 11, 2025 pm 05:29 PM

ThecssFilterPropertyAllowsvisualeffects-ähnlich, Helligkeit und GryscaletobeAppliedDirecttoHtmlelements.1) Usethesyntaxfilter: Filterfunktion (Wert) toappyeffects.2) Kombination

Was sind CSS-Pseudoklassen und wie man sie benutzt? Was sind CSS-Pseudoklassen und wie man sie benutzt? Aug 06, 2025 pm 01:06 PM

Die CSS-Pseudo-Klasse ist ein Schlüsselwort, mit dem der spezielle Zustand eines Elements definiert wird. Es kann dynamisch Stile anwenden, basierend auf Benutzerinteraktion oder Dokumentenort. 1.: Hover wird ausgelöst, wenn die Maus schwebt, z. B. die Taste: HOVER ändert die Knopffarbe. 2.: Fokus wirkt sich in Wirksamkeit, wenn das Element den Fokus erhält und die Zugänglichkeit verbessert. 3.: nt-child () wählt Elemente nach Position aus und unterstützt ungerade, sogar oder Formeln wie 2n 1; 4.: Erstkind und: Last-Kind Wählen Sie die ersten bzw. letzten Kinderelemente aus; 5.:Not () schließt Elemente aus, die den angegebenen Bedingungen entsprechen; 6.: Besuchen und: Link -Set -Stile basierend auf dem Linkzugriffsstatus, aber: Besucht wird durch Privatsphäre eingeschränkt.

So verwenden Sie CSS -Selektoren effektiv So verwenden Sie CSS -Selektoren effektiv Aug 11, 2025 am 11:12 AM

Bei der Verwendung von CSS-Selektoren sollten zuerst niedrig spezifische Selektoren verwendet werden, um übermäßige Einschränkungen zu vermeiden. 1. Verstehen Sie die Spezifitätsniveau und verwenden Sie sie in der Reihenfolge von Typ, Klasse und ID vernünftigerweise; 2. Verwenden Sie Mehrzweck-Klassennamen, um die Wiederverwendbarkeit und Wartbarkeit zu verbessern. 3.. Verwenden Sie Attribute und Pseudo-Klasse-Selektoren, um Leistungsprobleme zu vermeiden. 4. Halten Sie den Selektor kurz und klar; 5. Verwenden Sie BEM und andere Namensschwerpunkte, um die strukturelle Klarheit zu verbessern. 6. Vermeiden Sie den Missbrauch von Tag-Selektoren und: N-ten Kind und geben Sie der Verwendung von Werkzeugklassen oder modularen CSS Vorrang, um sicherzustellen, dass der Stil für lange Zeit kontrollierbar ist.

Wie benutze ich CSS Clamp () für reaktionsschnelle Typografie? Wie benutze ich CSS Clamp () für reaktionsschnelle Typografie? Aug 06, 2025 pm 04:51 PM

clamp () incssenablesfluid, ResponsivetypographyBysettingAvaluebetweenaminimum, bevorzugt und maximumsize; 1.Usclamp (min, bevorzugt, max)

CSS Mix-Blend-Mode-Beispiel CSS Mix-Blend-Mode-Beispiel Aug 08, 2025 pm 12:59 PM

Das Mix-Blend-Mode-Attribut wird verwendet, um den Mischungseffekt von Elementinhalt und Hintergrund zu steuern. 1. Multiplizieren können die Überlappung von Text- und Hintergrundbildern erreichen. 2. Bildschirm hellt das Bild auf und eignet sich für dunkle Hintergründe. 3. Die Überlagerung verbessert den Kontrast und kombiniert Multiplikations- und Bildschirmfunktionen. 4. Unterschied schafft einen starken Kontrast, der für kreatives Design geeignet ist. Es ist notwendig, sicherzustellen, dass sich Elemente überlappen und die richtige Z-Index-Stapelreihenfolge und in Kombination mit Isolation: Isolat, der Mischbereich begrenzt sein und reichhaltige visuelle Effekte können erreicht werden, indem Farben und Modi angepasst werden.

See all articles