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
Eine kurze Diskussion zum Problem, dass der Text in der Schaltfläche im Kompatibilitätsmodus des Browsers nicht vertikal zentriert ist
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
So zeigen Sie den Nginx-Konfigurationsdateipfad und den Ressourcendateipfad an
Zeigen Sie den Pfad der Nginx-Konfigurationsdatei...
Detailliertes Tutorial zur VMware-Installation des Linux CentOS 7.7-Systems
So installieren Sie das Linux CentOS 7.7-System i...
So zeigen Sie verfügbare Netzwerkschnittstellen in Linux an
Vorwort Die häufigste Aufgabe nach der Installati...
Beispiel für die Implementierung einer nahtlosen Endlosschleife im Hintergrund mithilfe einer CSS-Animation
1. Nachfrage Ein Bild bewegt sich in einer Endlos...
Implementierung der Docker-Bereitstellung von Webprojekten
Im vorherigen Artikel wurde der Docker-Dienst ins...
JavaScript zur Implementierung des Anmeldeformulars
In diesem Artikelbeispiel wird der spezifische Ja...
Benutzerdefinierte Docker-Netzwerkcontainer-Verbindung
Inhaltsverzeichnis Vorwort -Link Benutzerdefinier...
So umbrechen Sie das HTML-Titelattribut
Als ich vor ein paar Tagen ein Programm schrieb, w...
Ein Beispiel zum Abfragen von Daten in MySQL und zum Aktualisieren dieser Daten in eine andere Tabelle basierend auf Bedingungen
Dieser Artikel beschreibt anhand eines Beispiels,...
JavaScript Voranalyse, Objektdetails
Inhaltsverzeichnis 1. Voranalyse 1. Vorabanalyse ...
Beispiel für die Implementierung eines dynamischen Überprüfungscodes auf einer Seite mithilfe von JavaScript
Einführung: Heutzutage werden bei der Anmeldung o...
Detaillierte Analyse des Problems beim Hinzufügen von Where-Bedingungen mit Left Join in MySQL
Aktuelle Nachfrage: Es gibt zwei Tabellen, Gruppe...
Lösungen für den schwarzen Bildschirm bei der Installation von Ubuntu (3 Arten)
Die Grafikkarte meines Computers ist eine Nvidia-...
Windows-Plattformkonfiguration Version 5.7 + MySQL-Datenbankdienst
Beinhaltet den Prozess der Initialisierung des Ro...