Zeitleistenimplementierungsmethode basierend auf ccs3
|
In Webprojekten nutzen wir häufig die Zeitleistensteuerung. Dieser Artikel stellt eine CSS3-basierte Zeitleiste bereit, die Element für Element erweitert werden kann. In jedes erweiterte Element können Text, Bilder, Videos und andere Elemente eingebettet werden. Der Operationseffekt ist wie folgt:
erreichen Der Implementierungsprozess dieses Steuerelements ist relativ einfach und besteht hauptsächlich aus der Datei 1. test.html-Datei
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<link rel="stylesheet" href="timeline.css"/>
<title>Zeitleiste</title>
</Kopf>
<Text>
<div id='ZeitDiv'>
<ul id='Zeitleiste'>
<li Klasse='Arbeit'>
<Eingabeklasse='Radio' ID='Werk1' Name='Werke' Typ='Radio' aktiviert>
<div Klasse="relativ">
<label for='work1'>1. Titel 1</label>
<span class='date'>T1</span>
<span class='Kreis'></span>
</div>
<div Klasse='Inhalt'>
<p>
Im ersten Jahr von Chang'an (701) lebte Li Bai, dessen Höflichkeitsname Taibai war. Es wird allgemein angenommen, dass sein Geburtsort die Gemeinde Qinglian, Changlong (später in Changming geändert, um das Tabu des Kaisers Xuanzong zu umgehen), Mianzhou (Kreis Baixi), Jiannan Road, in der Tang-Dynastie war. Sein Stammsitz ist Tianshui, Gansu.
Sein familiärer Hintergrund und seine Familie sind unbekannt. Laut dem „Neuen Buch von Tang“ war Li Bai der Enkel in neunter Generation von Kaiser Xingsheng (Li Hao, König Wuzhao von Liang). Dieser Aussage zufolge gehörte Li Bai demselben Clan an wie die Könige der Li-Tang-Dynastie und war ein Cousin von Kaiser Taizong von Tang, Li Shimin.
Einige sagen auch, dass sein Vorfahre Li Jiancheng oder Li Yuanji war.
</p>
<p><img src="http://i.qulishi.com/UploadFile/2014-7/2014725171362.jpg" /></p>
</div>
</li>
<li Klasse='Arbeit'>
<Eingabeklasse='Radio' ID='Werk2' Name='Werke' Typ='Radio'>
<div Klasse="relativ">
<label for='work2'>2. Titel 2</label>
<span class='date'>T2</span>
<span class='Kreis'></span>
</div>
<div Klasse='Inhalt'>
<p>
Im November des ersten Jahres von Shenlong (705) starb Wu Zetian. Li Bai war fünf Jahre alt. In diesem Jahr begann ich, lesen zu lernen.
Im „Brief an Pei Changshi aus Anzhou“ heißt es: „Ich habe Liujia im Alter von fünf Jahren rezitiert.“ Liujia ist ein Lese- und Schreibbuch für Grundschulen in der Tang-Dynastie. Changshi ist der stellvertretende Leiter einer Präfektur.
</p>
</div>
</li>
<li Klasse='Arbeit'>
<Eingabeklasse='Radio' ID='Werk3' Name='Werke' Typ='Radio'>
<div Klasse="relativ">
<label for='work3'>3. Titel 3</label>
<span class='date'>T3</span>
<span class='Kreis'></span>
</div>
<div Klasse='Inhalt'>
<p>
Im dritten Jahr des Kaiyuan (715) war Li Bai fünfzehn Jahre alt.
Er hatte bereits viele Gedichte geschrieben, das Lob und die Unterstützung einiger Prominenter erhalten und begann, sich sozial zu engagieren.
Er begann sich auch vom taoistischen Gedankengut beeinflussen zu lassen, entwickelte eine Vorliebe für die Schwertkunst und genoss sein Leben als fahrender Ritter. In diesem Jahr wurde Cen Shen geboren.
</p>
</div>
</li>
<li Klasse='Arbeit'>
<Eingabeklasse='Radio' ID='Werk4' Name='Werke' Typ='Radio'>
<div Klasse="relativ">
<label for='work4'>4. Titel 4</label>
<span class='date'>T4</span>
<span class='Kreis'></span>
</div>
<div Klasse='Inhalt'>
<p>
Im sechsten Jahr von Kaiyuan (718) war Li Bai achtzehn Jahre alt.
Er lebte zum Studieren zurückgezogen auf dem Berg Dakuang in Daitian (heute in der Stadt Jiangyou, Provinz Sichuan).
Er reiste in die benachbarten Landkreise und besuchte Jiangyou, Jiange, Zizhou (die Präfekturhauptstadt lag in der heutigen Provinz Sichuan) usw., was ihm viel Erfahrung und Wissen einbrachte.
</p>
</div>
</li>
</ul>
</div>
</body>
</html>2. timeline.css-Datei
#zeitDiv{
maximale Breite: 1200px;
Rand: 0 automatisch;
Polsterung: 0,5 %;
Schriftgröße: 100 %;
Schriftfamilie: „Noto Sans“, serifenlos;
Farbe: Schwarz;
Hintergrund: weiß;
}
/* -------------------------------------
* Zeitleiste
* ------------------------------------- */
#Zeitleiste {
Listenstil: keiner;
Rand: 50px 0 30px 120px;
Polsterung links: 30px;
Rahmen links: 8px durchgehend grau;
}
#Zeitleiste li {
Rand: 40px 0;
Position: relativ;
}
#Zeitleiste p {
Rand: 0 0 15px;
}
.Datum {
Rand oben: -10px;
oben: 50 %;
links: -80px;
Schriftgröße: 0,95em;
Zeilenhöhe: 20px;
Position: absolut;
}
.Kreis {
Rand oben: -15px;
oben: 50 %;
links: -49px;
Breite: 20px;
Höhe: 20px;
Hintergrund: weiß;
Rand: 5px durchgehend grau;
Randradius: 50 %;
Anzeige: Block;
Position: absolut;
}
.Inhalt {
maximale Höhe: 20px;
Polsterung: 70px 20px 0;
Rahmenfarbe: transparent;
Rahmenbreite: 2px;
Rahmenstil: durchgezogen;
Rahmenradius: 0,5em;
Position: relativ;
}
.content:vorher, .content:nachher {
Inhalt: "";
Breite: 0;
Höhe: 0;
Rand: durchgehend transparent;
Position: absolut;
Zeigerereignisse: keine;
rechts: 100%;
}
.Inhalt:vor {
Rahmenfarbe rechts: erben;
Rahmenbreite: 20px;
oben: 50 %;
Rand oben: -20px;
}
.Inhalt:nach {
Rahmenfarbe rechts: weiß;
Rahmenbreite: 17px;
oben: 50 %;
Rand oben: -17px;
}
.Inhalt p {
maximale Höhe: 0;
Farbe: transparent;
Textausrichtung: Blocksatz;
Worttrennung: Worttrennung;
Bindestriche: auto;
Überlauf: versteckt;
}
Etikett {
Schriftgröße: 1,3em;
Position: absolut;
Z-Index: 100;
Cursor: Zeiger;
oben: 35px;
Übergang: Transformation 0,2 s linear;
Schriftstärke: fett;
}
.radio {
Anzeige: keine;
}
.radio:geprüft + .relative Bezeichnung {
Cursor: automatisch;
transformieren: übersetzenX(42px);
}
.radio:geprüft + .relative .circle {
Hintergrund: rot;
}
.radio:geprüft ~ .content {
maximale Höhe: 200000px;
Rahmenfarbe: hellgrau;
Rand rechts: 20px;
transformieren: übersetzenX(20px);
Übergang: max. Höhe 0,4 s linear, Rahmenfarbe 0,5 s linear, Transformation 0,2 s linear;
}
.radio:geprüft ~ .content p {
maximale Höhe: 200000px;
Farbe: Schwarz;
Übergang: Farbe 0,3 s linear 0,3 s;
}
/* -------------------------------------
* Mobiltelefone (nur vertikale Version)
* ------------------------------------- */
@media screen und (max-width: 767px) {
#Zeitleiste {
Rand links: 0;
Polsterung links: 0;
Rand links: keiner;
}
#Zeitleiste li {
Rand: 50px 0;
}
Etikett {
Breite: 85 %;
Schriftgröße: 1,1em;
Leerzeichen: Nowrap;
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Anzeige: Block;
transformieren: übersetzenX(18px);
}
.Inhalt {
Polsterung oben: 60px;
Rahmenfarbe: #eee9dc;
}
.content:vorher, .content:nachher {
Rand: durchgehend transparent;
unten: 100 %;
}
.Inhalt:vor {
Rahmenunterseite-Farbe: erben;
Rahmenbreite: 17px;
oben: -16px;
links: 50px;
Rand links: -17px;
}
.Inhalt:nach {
Farbe des unteren Rahmens: weiß;
Rahmenbreite: 20px;
oben: -20px;
links: 50px;
Rand links: -20px;
}
.Inhalt p {
Schriftgröße: 0,9em;
Zeilenhöhe: 1,4;
}
.Kreis, .Datum {
Anzeige: keine;
}
}【Referenzen】 CSS3-ZEITPLAN Dies ist das Ende dieses Artikels über die auf ccs3 basierende Methode zur Implementierung von Zeitleisten. Weitere relevante Inhalte zur Implementierung von CSS3-Zeitleisten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Die Tabelle fügt Zellen und das img-Bild zusammen, um das gesamte td-HTML auszufüllen
Artikel empfehlen
Details zum Prototypmodus des Javascript-Entwurfsmusters
Inhaltsverzeichnis 1. Prototyp-Modus Beispiel 1 B...
Reines CSS zum Erzielen eines schmelzenden Kerzenmusters (Wassertropfen) – Beispielcode
Ergebnisse erzielen Umsetzungsideen Der Schmelzef...
Vue3.0 implementiert die Fallstudie zum Lupeneffekt
Der zu erzielende Effekt ist: Festes Vergrößern a...
Vite führt die Implementierung virtueller Dateien ein
Inhaltsverzeichnis Hintergrund Virtuelle Dateien ...
Detaillierte Erläuterung der Reihenfolge der JS-Objektdurchquerung
Einige von Ihnen haben vielleicht gehört, dass di...
CSS-Implementierungscode für die Textausrichtung
Beim Erstellen von Formularen kommt es häufig vor...
So filtern Sie während einer vollständigen MySQL-Sicherung bestimmte Bibliotheken heraus
Verwenden Sie den Parameter --all-database , wenn...
Detaillierte Erklärung des Responsive-Prinzips von Vue3
Inhaltsverzeichnis Überprüfung der responsiven Pr...
Detaillierte Installationsanleitung für das Cloud-Server-Pagoda-Panel
Inhaltsverzeichnis 0x01. Installieren Sie das Pag...
Fallstudie zu JavaScript-Style-Objekten und CurrentStyle-Objekten
1. Stilobjekt Das Stilobjekt stellt eine einzelne...
Grundlegende Verwendung von UNION und UNION ALL in MySQL
In der Datenbank führen sowohl die Schlüsselwörte...
Beispielcode zur Implementierung von Follow Ads mit JavaScript
Floating Ads sind eine sehr verbreitete Form der ...
Einige Verbesserungen in MySQL 8.0.24 Release Note
Inhaltsverzeichnis 1. Verbindungsmanagement 2. Ve...
Wie kompliziert ist die Priorität von CSS-Stilen?
Gestern Abend habe ich mir eine Interviewfrage ang...
So erstellen Sie einen Nginx-Image-Server mit Docker
Vorwort Bei der allgemeinen Entwicklung werden Bi...