CSS3 erzielt einen coolen Karusselleffekt mit geschnittenen Bildern

Heute lernen wir, wie man mit CSS eine coole Bildkarussellkomponente erstellt. Das Prinzip besteht ganz einfach darin, durch Klicken auf das Beschriftungselement das Hintergrundbild und die Animationseffekte umzuschalten. Der Kern besteht darin, Optionsfelder zu verwenden, die mit Beschriftungen verknüpft sind, und einen universellen Geschwisterselektor zum Auffinden der einzelnen Bilder zu nutzen.

Der endgültige Effekt, den wir erzielen möchten, ist dieser:

Zusammensetzung des Karussells

Das HTML besteht aus drei Hauptteilen: dem Optionsfeld und der Bezeichnung, dem Container, der die vier Bedienfelder und ihre „Slices“ für jedes Bild enthält, und dem Titel. Der auf class="cr-bgimg" eingestellte Container unterteilt jedes Bild in vier Felder, wobei das Hintergrundbild durch das Attribut „background-position“ in jedem Feld an der entsprechenden Stelle positioniert wird. Das erste Panel besteht also aus vier Segmenten, jedes mit einem Bild als Hintergrund, und wird ganz links im Container positioniert. Das zweite Panel hat ebenfalls vier Slices. Es befindet sich rechts neben dem ersten Panel und wird verwendet, um den zweiten Slice-Teil des Bildes anzuzeigen:

<Abschnitt Klasse="cr-container">            
    <!-- Optionsfeld und Beschriftungs-Tag-->
    <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" aktiviert/>
    <label für="select-img-1" class="cr-label-img-1">1</label>
    <Eingabe-ID="select-img-2" Name="Radio-Set-1" Typ="Radio" Klasse="cr-selector-img-2" />
    <label für="select-img-2" class="cr-label-img-2">2</label>
    <Eingabe-ID="select-img-3" Name="Radio-Set-1" Typ="Radio" Klasse="cr-selector-img-3" />
    <label für="select-img-3" class="cr-label-img-3">3</label>
    <Eingabe-ID="select-img-4" Name="Radio-Set-1" Typ="Radio" Klasse="cr-selector-img-4" />
    <label für="select-img-4" class="cr-label-img-4">4</label>
    <div Klasse="clr"></div>    
    <!-- Bedienfeld -->
    <div Klasse="cr-bgimg">
        <div>
            <span>Ausschnitt 1 – Bild 1</span>
            <span>Ausschnitt 1 – Bild 2</span>
            <span>Ausschnitt 1 – Bild 3</span>
            <span>Ausschnitt 1 – Bild 4</span>
        </div>
        <div>
            <span>Ausschnitt 2 – Bild 1</span>
            Scheibe 2 - Bild 2
            <span>Ausschnitt 2 – Bild 3</span>
            Scheibe 2 - Bild 4
        </div>
        <div>
            <span>Ausschnitt 3 – Bild 1</span>
            <span>Ausschnitt 3 – Bild 2</span>
            Scheibe 3 - Bild 3
            <span>Ausschnitt 3 – Bild 4</span>
        </div>
        <div>
            <span>Scheibe 4 – Bild 1</span>
            Scheibe 4 - Bild 2
            Scheibe 4 - Bild 3
            Scheibe 4 - Bild 4
        </div>
    </div>
    <!-- Titel -->
    <div Klasse="cr-titles">
        <h3>
            Glücklicher Zufall
            <span>Wovon Sie geträumt haben</span>
        </h3>
        <h3>
            <span>Abenteuer</span>
            Wo der Spaß beginnt
        </h3>
        <h3>
            <span>Natur</span>
            Unvergessliche Erlebnisse
        </h3>
        <h3>
            <span>Gelassenheit</span>
            <span>Wenn Stille die Natur berührt</span>
        </h3>
    </div>
</Abschnitt>

Das h3-Element enthält zwei Span-Elemente, eines ist der Haupttitel und das andere ist der Untertitel.

CSS

Der Einfachheit halber werden im CSS dieses Artikels Browserpräfixe weggelassen, der Code, den Sie erhalten, ist jedoch vollständig.

Unser erstes Ziel ist es, beim Klicken auf das Beschriftungselement das entsprechende Optionsfeld auszulösen. Die Methode ist sehr einfach: Ordnen Sie einfach den Attributwert des Beschriftungselements dem ID-Wert des Optionsfelds zu.

Im zweiten Schritt müssen wir alle Hintergrundbilder an der richtigen Position positionieren. Der dritte Schritt besteht darin, den entsprechenden Bildausschnitt und Titel anzuzeigen, wenn Sie auf die Beschriftung klicken.

Schauen wir es uns Schritt für Schritt an. Legen Sie zunächst den Stil des äußersten Abschnittselements fest und geben Sie ihm einen leichten Schatteneffekt.

.cr-container{
    Breite: 600px;
    Höhe: 400px;
    Position: relativ;
    Rand: 0 automatisch;
    Rand: 20px durchgezogen #fff;
    Kastenschatten: 1px 1px 3px rgba(0,0,0,0,1);
}

Da wir später den universellen Geschwisterselektor „~“ verwenden, um die entsprechenden Bildausschnitte und Titel auszuwählen, platzieren wir alle Beschriftungselemente oben im Code. Stellen Sie sicher, dass das Beschriftungselement über dem Bild und dem Text angezeigt wird, indem Sie die Eigenschaft „Z-Index“ festlegen, und halten Sie es mithilfe der Eigenschaft „Margin-Top“ 350 Pixel vom oberen Gesamtrand entfernt.

.cr-Containerbezeichnung{
    Schriftstil: kursiv;
    Breite: 150px;
    Höhe: 30px;
    Cursor: Zeiger;
    Farbe: #fff;
    Zeilenhöhe: 32px;
    Schriftgröße: 24px;
    schweben: links;
    Position: relativ;
    Rand oben: 350px;
    Z-Index: 1000;
}

Als nächstes fügen wir einen kleinen Kreis hinzu, um das Beschriftungselement zu verschönern. Wir erstellen ein Pseudoelement und platzieren es in der Mitte des Textes.

.cr-container label:vor{
    Inhalt:'';
    Breite: 34px;
    Höhe: 34px;
    Hintergrund: rgba(130,195,217,0,9);
    Position: absolut;
    links: 50%;
    Rand links: -17px;
    Randradius: 50 %;
    Kastenschatten: 0px 0px 0px 4px rgba (255,255,255,0,3);
    z-Index: -1;
}

Um eine Trennlinie zwischen den Panels zu erstellen, verwenden wir ein weiteres Pseudoelement des Label-Elements und erweitern es mit einem Verlaufshintergrund vom oberen Bildrand bis zum unteren Rand.

.cr-container label:nach{
    Breite: 1px;
    Höhe: 400px;
    Inhalt: '';
    Hintergrund: linearer Farbverlauf (oben, rgba(255,255,255,0) 0 %, rgba(255,255,255,1) 100 %);
    Position: absolut;
    unten: -20px;
    rechts: 0px;
}

Das letzte Panel sollte auf der rechten Seite keinen Teiler haben, daher setzen wir seine Breite auf 0.

.cr-container label.cr-label-img-4:nach{
    Breite: 0px;
}

Nachdem der Beschriftungsstil nun vollständig ist, können wir alle Optionsfelder ausblenden.

.cr-container Eingabe{
    Anzeige: keine;
}

Wenn wir auf ein Beschriftungselement klicken, wird das entsprechende Optionsfeld ausgewählt. Umgekehrt können Sie mit dem universellen Geschwisterselektor das der ausgewählten Schaltfläche entsprechende Beschriftungselement auswählen und dessen Textfarbe ändern.

.cr-container input.cr-selector-img-1:aktiviert ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:aktiviert ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:aktiviert ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:aktiviert ~ label.cr-label-img-4{
    Farbe: #68abc2;
}

Wir können auch die Farbe des kleinen Kreises ändern und einen Schatteneffekt hinzufügen.

.cr-container input.cr-selector-img-1:aktiviert ~ label.cr-label-img-1:vorher,
.cr-container input.cr-selector-img-2:aktiviert ~ label.cr-label-img-2:vorher,
.cr-container input.cr-selector-img-3:aktiviert ~ label.cr-label-img-3:vorher,
.cr-container input.cr-selector-img-4:geprüft ~ label.cr-label-img-4:vorher{
    Hintergrund: #fff;
    Kastenschatten: 0px 0px 0px 4px rgba (104,171,194,0,6);
}

Der Container des Bildes nimmt die gesamte Breite ein und wird absolut positioniert. Dieser Container wird später verwendet, um das Hintergrundbild auf das aktuell ausgewählte Bild einzustellen. Wir benötigen außerdem ein Bild, das standardmäßig sichtbar ist. Fügen wir also einige Hintergrundeigenschaften hinzu:

.cr-bgimg{
    Breite: 600px;
    Höhe: 400px;
    Position: absolut;
    links: 0px;
    oben: 0px;
    Z-Index: 1;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundposition: 0 0;
}

Da wir vier Panels haben, ist jedes Panel 150 Pixel breit (600 geteilt durch 4). Die Bedienfelder sind so eingestellt, dass sie links schweben und somit nebeneinander angezeigt werden. Ihr Überlauf ist so eingestellt, dass er ausgeblendet wird, da wir nicht möchten, dass die Segmente beim Verschieben herauskommen:

.cr-bgimg div{
    Breite: 150px;
    Höhe: 100%;
    Position: relativ;
    schweben: links;
    Überlauf: versteckt;
    Hintergrundwiederholung: keine Wiederholung;
}

Für jedes Segment wird außerdem die absolute Positionierung und left:-150px eingestellt, um es außerhalb des Panels anzuzeigen und auszublenden:

.cr-bgimg div span{
    Position: absolut;
    Breite: 100 %;
    Höhe: 100%;
    oben: 0px;
    links: -150px;
    Z-Index: 2;
    Texteinzug: -9000px;
}

Als nächstes kümmern wir uns um die Hintergrundbilder für den Container und jedes Segment:

.cr-container input.cr-selector-img-1:aktiviert ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
    Hintergrundbild: URL (../images/1.jpg);
}
.cr-container input.cr-selector-img-2:aktiviert ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
    Hintergrundbild: URL (../images/2.jpg);
}
.cr-container input.cr-selector-img-3:aktiviert ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
    Hintergrundbild: URL (../images/3.jpg);
}
.cr-container input.cr-selector-img-4:aktiviert ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
    Hintergrundbild: URL (../images/4.jpg);
}

Wir müssen außerdem für die Positionierung des Slice-Hintergrundbilds je nach den verschiedenen Bedienfeldern sorgen:

.cr-bgimg div:nth-child(1) span{
    Hintergrundposition: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
    Hintergrundposition: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
    Hintergrundposition: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
    Hintergrundposition: -450px 0px;
}

Wenn wir auf ein Etikett klicken, schieben wir alle Segmente nach rechts:

.cr-container Eingabe: geprüft ~ .cr-bgimg div span{
    Animation: SlideOut, 0,6 s, leichtes Rein-Raus;
}
@keyframes slideOut{
    0 %{
        links: 0px;
    }
    100 %{
        links: 150px;
    }
}

Aber mit Ausnahme des von uns ausgewählten Beschriftungs-Tags verschiebt sich der entsprechende Bildausschnitt von -150px auf 0px:

.cr-container input.cr-selector-img-1:geprüft ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:geprüft ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:geprüft ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:geprüft ~ .cr-bgimg div span:nth-child(4)
{
    Übergang: links 0,5 s Ein- und Ausfahren;
    Animation: keine;
    links: 0px;
    Z-Index: 10;
}

Zum Schluss legen wir im h3-Tag den Stil der Haupt- und Untertitel fest. Wenn wir auf ein Label-Tag klicken, wechselt die Transparenz des entsprechenden Titels von 0 auf 1:

.cr-Titel h3{
    Position: absolut;
    Breite: 100 %;
    Textausrichtung: zentriert;
    oben: 50 %;
    Z-Index: 10000;
    Deckkraft: 0;
    Farbe: #fff;
    Textschatten: 1px 1px 1px rgba(0,0,0,0,1);
    Übergang: Deckkraft 0,8 s, leichtes Ein-Aus;
}
.cr-titles h3 span:nth-child(1){
    Schriftfamilie: „BebasNeueRegular“, „Arial Narrow“, Arial, serifenlos;
    Schriftgröße: 70px;
    Anzeige: Block;
    Buchstabenabstand: 7px;
}
.cr-titles h3 span:nth-child(2){
    Buchstabenabstand: 0px;
    Anzeige: Block;
    Hintergrund: rgba(104,171,194,0,9);
    Schriftgröße: 14px;
    Polsterung: 10px;
    Schriftstil: kursiv;
    Schriftfamilie: Cambria, Palatino, „Palatino Linotype“, „Palatino LT STD“, Georgia, Serifen;
}
.cr-container input.cr-selector-img-1:aktiviert ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:aktiviert ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:aktiviert ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:geprüft ~ .cr-titles h3:nth-child(4){
    Deckkraft: 1;
}

Das ist es! Auf diese Weise wird der Effekt eines geschnittenen Karussells erzielt. Natürlich können wir durch diesen Effekt auch weitere Slicing-Effekte erweitern, wie zum Beispiel:

Effekt 2

Effekt drei

Effekt 4

Zusammenfassen

Das Obige ist die Einführung des Herausgebers in den coolen Karusselleffekt mit geschnittenen Bildern, der mit CSS3 erzielt wird. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: So implementieren Sie die Kontrollkästchen- und Radioausrichtung

>>: DOCTYPE Dokumenttypdeklaration (unbedingt lesenswert für Webseiten-Liebhaber)

So lösen Sie das Problem, das Root-Passwort von Mysql auf dem Mac zu vergessen

CSS3 erzielt einen coolen Karusselleffekt mit geschnittenen Bildern

So lösen Sie das Problem, das Root-Passwort von Mysql auf dem Mac zu vergessen

Die HTML-Tag-ID kann eine Variable sein

Zusammenfassung der grundlegenden allgemeinen MySQL-Befehle

Eine kurze Analyse, ob der MySQL-Primärschlüssel Zahlen oder UUIDs für schnellere Abfragen verwendet

Installations-Tutorial für mysql8.0rpm auf centos7

Detaillierte Analyse des Befehls chmod zum Ändern der Dateiberechtigungen unter Linux

7 nützliche neue TypeScript-Funktionen

Linux-Kernel-Gerätetreiber. Zusammenfassung der Hinweise zum Lademechanismus von Linux-Kernelmodulen.

Detaillierte Erklärung der Kernfunktionen und der Ereignisbehandlung von jQuery

Unterschied zwischen varchar- und char-Typen in MySQL

Artikel empfehlen

Mehrere Implementierungsmethoden sowie Vor- und Nachteile der SQL-Paging-Abfrage in MySQL

So kompilieren Sie Nginx neu und fügen Module hinzu

Einführung in die Verwendung der vier wichtigsten SQL-Rankingfunktionen ROW_NUMBER, RANK, DENSE_RANK, NTILE

Lösung für das zu langsame Herunterladen des Docker-Images

Werden die erfolgreichsten Unternehmen der Zukunft Technologieunternehmen oder Designunternehmen sein?

Detailliertes Tutorial zur Installation eines PXC-Clusters mit Docker

Detaillierte Schritte zur Entwicklung einer Java-Zahlungsschnittstelle für Alipay

So erstellen Sie einen SVN-Server unter Linux

So fügen Sie Docker dynamisch Ports hinzu, ohne das Image neu zu erstellen

So verbinden Sie SpringBoot mit MySQL, um Daten abzurufen und in die Backend-Schnittstelle zu schreiben

Perfekte Lösung zur vertikalen Zentrierung von Formelementen

Professionelle MySQL-Entwicklungsdesignspezifikationen und SQL-Schreibspezifikationen

HTML verwendet reguläre Ausdrücke zum Testen von Tabellenbeispielen

Erfahren Sie mehr über die MySQL-Speicher-Engine

So installieren und implementieren Sie einen FTP-Image-Server unter Linux