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
Zusammenfassung der grundlegenden allgemeinen MySQL-Befehle
Inhaltsverzeichnis Grundlegende allgemeine MySQL-...
So implementieren Sie eine einfache Datenüberwachung mit JS
Inhaltsverzeichnis Überblick erster Schritt Schri...
ElementUI implementiert die Funktionsschaltfläche zum Zurücksetzen des Formulars el-form
Inhaltsverzeichnis Geschäftsszenario: Wirkungsdem...
Eine detaillierte Erklärung der DIV+CSS-Benennungsregeln kann zur SEO-Optimierung beitragen
1. Benennungskonventionen für CSS-Dateien Vorschl...
Docker-Bereitstellung von Implementierungsschritten für Flask-Anwendungen
1. Zweck Schreiben Sie lokal eine Flask-Anwendung...
Die wichtigsten Unterschiede zwischen MySQL 4.1/5.0/5.1/5.5/5.6
Einige Befehlsunterschiede zwischen den Versionen...
Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten
Dieser Artikel dient lediglich der Erinnerung an ...
Analyse der MySQL-Transaktionsmerkmale und Ebenenprinzipien
1. Was ist eine Transaktion? Eine Datenbanktransa...
So verwenden Sie display:olck/none zum Erstellen einer Menüleiste
Die Auswirkung der Vervollständigung einer Menüle...
In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)
Mit dem obigen Artikel habe ich meine Einführung i...
Objektorientierte JavaScript-Implementierung eines Lupengehäuses
In diesem Artikel wird der spezifische Code der o...
Zusammenfassung der Bootstrap-Lernerfahrung - Austausch von Designs im CSS-Stil
Aufgrund der Anforderungen des Projekts habe ich ...
Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME
Verwenden Sie die FRAME-Eigenschaft, um den Stilt...
Detaillierte Erläuterung grundlegender Betriebsbefehle wie Starten und Stoppen von Nginx unter Windows
Um Nginx unter Windows zu verwenden, müssen wir e...
Aufnahmedateien des öffentlichen WeChat-Kontos abspielen und speichern (AMR-Dateien in MP3 konvertieren)
Inhaltsverzeichnis Tools zur Audiotranskodierung ...