CSS realisiert den Prozessnavigationseffekt (drei Methoden)
|
CSS realisiert den Prozessnavigationseffekt. Der spezifische Inhalt ist wie folgt: ::Tipp: Verwenden Sie reines CSS für Online-Prozessnavigationseffekte. In diesem Artikel wird einheitlich das Flex-Layout verwendet. Sie können zur Implementierung auch andere Layouts verwenden. Das Kernprinzip bleibt unverändert::: ## Methode 1: Zuschneiden Diese Methode wird im Internet Explorer nicht unterstützt. Verwenden Sie clip-path: polygon(), um direkt ein Dreieck zu zeichnen. Der einzige Punkt, den Sie berechnen müssen, ist der ungefähre Prozentsatz.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta name="viewport" content="width=Gerätebreite">
<Stil>
.nav-box {
Anzeige: Flex;
Listenstil: keiner;
Schriftgröße: 14px;
}
.nav-box li {
Leerzeichen: Nowrap;
Farbe: #019fe9;
Hintergrund: #edf9ff;
Zählerinkrement: listCounter;
Clip-Pfad: Polygon (87 % 0, 100 % 50 %, 87 % 100 %, 0 100 %, 13 % 50 %, 0 0);
Zeilenhöhe: 40px;
Polsterung: 0 25px;
Rand rechts: -10px;
}
.nav-box li::vor {
Inhalt: Zähler(Listenzähler) "-";
}
.nav-box .aktiv {
Farbe: #fcfefe;
Hintergrund: #009fe9;
}
.nav-box .active ~ li {
Farbe: #8e8e8e;
Hintergrund: #ebedf0;
}
</Stil>
</Kopf>
<Text>
<!-- Behälter -->
<ol Klasse="Navigationsbox">
<li><a href="">Regelbeschreibung</a></li>
<li><a href="">Nehmen Sie an der Veranstaltung teil</a></li>
<li class="active" aria-current="true"><a href="">Nehmen Sie an der Verlosung teil</a></li>
<li><a href="">Preisverteilung</a></li>
<li><a href="">Ergebnisse anzeigen</a></li>
</ol>
</body>
</html>
## Methode 2: Verwenden von Dislokation flex + transform: skewX(); Implementieren Sie das Präfix -ms- in ie9+ + Diese Methode nutzt auch „before“ und „after“ vollständig aus. + Prinzip 1 --- Verwenden Sie „before“ + „after“, um in eine obere und eine untere Hälfte zu unterteilen <Badge text="[Diese Methode hat den Fehler, dass sie das erste Ende separat vervollständigen muss]" type="warn"/> + Prinzip 2 --- Verwenden Sie „before“ + „after“, um in eine linke und eine rechte Hälfte zu unterteilen <Badge text="[Diese Methode verarbeitet nur das erste „before“ oder „after“, um das Problem des ersten zu vermeiden]" type="success"/>
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta name="viewport" content="width=Gerätebreite">
<Stilbereich>
.nav-box {
Anzeige: Flex;
Listenstil: keiner;
Schriftgröße: 14px;
}
.nav-box li {
Leerzeichen: Nowrap;
Farbe: #019fe9;
Polsterung: 0 15px 0 25px;
Zeilenhöhe: 40px;
Rand links: 3px;
Position: relativ;
Z-Index: 99;
}
.nav-box li:erstes-Kind{
Hintergrund: #edf9ff;
Rand rechts: 7px;
}
.nav-box .active:erstes-Kind{
Hintergrund: #019fe9;
}
.nav-box li:erstes-Kind::vorher,
.nav-box li:erstes-kind::nach{
links: 7px;
}
.nav-box li::vorher,
.nav-box li::nach {
Inhalt: "";
Position: absolut;
links: 0;
Höhe: 50%;
Breite: 100 %;
Hintergrund: #edf9ff;
z-Index: -1;
}
.nav-box li::vor {
oben: 0;
Transformation: Schrägstellung (30 Grad);
}
.nav-box li::nach {
unten: 0;
Transformieren: Schrägstellung (-30 Grad);
}
.nav-box .aktiv {
Farbe: #d7effb;
}
.nav-box .active::vorher,
.nav-box .active::nach {
Hintergrund: #009fe9;
}
.aktiv ~ li {
Farbe: #909091;
}
.aktiv ~ li::vorher,
.aktiv ~ li::nach {
Hintergrund: #ebedf0;
}
</Stil>
</Kopf>
<Text>
<!-- Behälter -->
<ol Klasse="Navigationsbox">
<li class="active">1-Regelbeschreibung</li>
<li>2- An Aktivitäten teilnehmen</li>
<li>3- Nehmen Sie an der Verlosung teil</li>
<li>4- Preisverteilung</li>
<li>5-Teilnahmeergebnisse</li>
</ol>
</body>
</html>## Methode 3: Grenzdreieck Verwenden Sie Ränder, um vordere und hintere Dreiecke zu erzeugen. Der Nachteil ist, dass Sie den Index selbst definieren müssen. CSS-Zähler können nicht ohne Beschriftungen verwendet werden.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta name="viewport" content="width=Gerätebreite">
<Stil>
.nav-box{
Höhe: 40px;
Zeilenhöhe: 40px;
Listenstil: keiner;
Polsterung: 0;
Anzeige: Flex;
Schriftgröße: 14px;
Überlauf: versteckt;
}
.nav-box li{
Polsterung: 0 10px 0 10px;
Rand rechts: 18px;
Leerzeichen: Nowrap;
Position: relativ;
Farbe: #019fe9;
Hintergrund: #edf9ff;
}
/* Dreieck */
.nav-box li:vorher,.nav-box li:nachher{
Inhalt:'';
Position: absolut;
Breite: 0;
Höhe: 0;
}
.nav-box li:vor{
rechts: -16px;
Rand: durchgehend transparent;
Rahmenbreite: 20px 0 20px 16px;
Rahmenfarbe links: #edf9ff;
z-Index: 2;
}
/* Weiße Linie */
.nav-box li:nach{
oben: -3px;
links: -18px;
Rand: durchgezogen #edf9ff;
Rahmenbreite: 23px 0 23px 18px;
Rahmenfarbe links: transparent;
Z-Index: 1;
}
.nav-box .aktiv{
Farbe: #fff;
Hintergrund: #009fe9;
}
.nav-box .active ~ li{
Farbe: #8e8e8e;
Hintergrund:#ebedf0;
}
.nav-box .active:vor{
Rahmenfarbe links: #009fe9;
}
.nav-box .active:nach{
Rahmenfarbe: #009fe9;
Rahmenfarbe links: transparent;
}
.nav-box .active ~ li:vor{
Rahmenfarbe links: #ebedf0;
}
.nav-box .active ~ li:nach{
Rahmenfarbe: #ebedf0;
Rahmenfarbe links: transparent;
}
</Stil>
</Kopf>
<Text>
<ol Klasse="Navigationsbox">
<li>1-Regelbeschreibung</li>
<li>2- An Aktivitäten teilnehmen</li>
<li class="active">3- Nehmen Sie an der Verlosung teil</li>
<li>4- Preisverteilung</li>
<li>5-Teilnahmeergebnisse</li>
</ol>
</body>
</html>Zusammenfassen Oben sehen Sie die vom Editor eingeführte CSS-Implementierung des Prozessnavigationseffekts (drei Methoden). Ich hoffe, dass es für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor 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! |
<<: Zusammenfassung zur Verwendung von MySQL-Isolationsspalten und Präfixindizes
>>: So erstellen Sie ein ELK-Protokollsystem basierend auf Docker
Artikel empfehlen
So implementieren Sie die King of Glory-Personal-Ladeseite mit CSS3
Wer King of Glory gespielt hat, sollte mit der Wi...
js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen
In diesem Artikel wird der spezifische Code von j...
CSS erkennt, dass die linke Seite der Webseitenspalte fixiert ist und passt die Position beim Scrollen nach unten automatisch an
Vorschauadresse: https://ovsexia.gitee.io/leftfix...
So verwenden Sie den dd-Befehl in Linux, ohne die Festplatte zu zerstören
Egal, ob Sie versuchen, Daten von einem sterbende...
Grafisches Tutorial zur Maven-Installation und -Konfiguration unter Windows (einschließlich lokalisierter Warehouse-Konfiguration)
1. Maven herunterladen Offizielle Maven-Website: ...
Tutorial zur Installation und Konfiguration der Centos7-MySQL-Datenbank
1. Systemumgebung Die Systemversion nach dem Yum-...
Detaillierte Erklärung zur Installation von CentOS7 mit der in Win10 integrierten virtuellen Maschine Hyper-V
1. Installieren Sie die virtuelle Maschine Hyper-...
Spezifische Verwendung des Autoindex-Moduls in der Nginx-HTTP-Modulreihe
Die Hauptfunktion des Browsermoduls besteht darin...
Implementierung der Optimierung für das Laden ausgewählter Mehrfachdaten in Element
Inhaltsverzeichnis Szenario Code-Implementierung ...
So verbessern Sie die Sicherheit von Linux- und Unix-Servern
Netzwerksicherheit ist ein sehr wichtiges Thema u...
So löschen Sie node_modules und installieren es neu
Inhaltsverzeichnis Schritt 1: Installieren Sie no...
Eine kurze Diskussion über die Effizienz der MySQL-Unterabfrage-Vereinigung und in
Bei jüngsten Produkttests wurde das Problem festg...
Zusammenfassung der MySQL-Tabellen- und Spaltenkommentare
Genau wie bei Code können Sie den Tabellen und Sp...
Teilen Sie die Fallstricke von MySQLs current_timestamp und ihre Lösungen
Inhaltsverzeichnis MySQLs current_timestamp-Falle...
MySQL 5.0.96 für Windows x86 32-Bit Green - vereinfachte Version - Installations-Tutorial
MySQL 5.0 ist aufgrund seiner wenigen „erweiterte...