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
Beispielcode für ein einfaches, nahtlos scrollendes Karussell, implementiert mit nativem Js
Das einfache, nahtlos scrollende Karussell weist ...
Einige Erfahrungen in der Selbstkultivierung von Künstlern
Da der Einfluss des Unternehmens wächst und seine...
So konfigurieren Sie gängige Software unter Linux
Wenn Sie einen neuen Linux-Server bekommen, müsse...
Eine kurze Analyse der parallelen WriteSet-Replikation von MySQL
【Historischer Hintergrund】 Ich arbeite seit drei ...
Detailliertes Tutorial zur Installation von Harbor Private Warehouse mit Docker Compose
Überblick Was ist Hafen? Das englische Wort bedeu...
Beheben Sie das Problem, dass Mysql5.7.17 unter Windows nicht installiert und gestartet werden kann
Installieren Sie MySQL zum ersten Mal auf Ihrem C...
Datums- und Zeitkomponente des WeChat-Applets (Jahr, Monat, Tag, Stunde und Minute)
In diesem Artikelbeispiel wird der spezifische Co...
Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen
Verwenden Sie HTML, um komplexe Tabellen zu erste...
Grundlegende Befehle für MySQL-Datenbankoperationen
1. Erstellen Sie eine Datenbank: Daten erstellen ...
WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)
Inhaltsverzeichnis 1. Wirkungsdiagramm (mehrere S...
Detaillierte Erklärung des TS-Objekt-Spread-Operators und des Rest-Operators
Inhaltsverzeichnis Überblick Objektrestattribut E...
Eine einfache Möglichkeit, den CSS-, JavaScript- und Hintergrundbild-Cache im Browser zu leeren
Im eigentlichen Projektentwicklungsprozess wird di...
Docker-Compose erstellt eine Brücke, fügt ein Subnetz hinzu und löscht eine Netzwerkkarte
1. Erstellen Sie eine Docker-Netzwerkkarte [root@...
CSS World – Code-Praxis: Präsentation zu alternativen Bildinformationen
Wenn wir jedoch das Element <img> mit der S...
Vue implementiert Benutzeranmeldung und Token-Verifizierung
Im Falle einer vollständigen Trennung von Front-E...