CSS3 zum Erzielen von Zeitleisteneffekten
|
Als ich kürzlich meinen Computer einschaltete, sah ich, dass die Geek Academy einen kostenlosen Monat für neue Benutzer anbot, also schaute ich mir das an. Ich werde nicht näher auf die Kurse eingehen, aber ich sah diesen Effekt auf der Seite mit der praktischen Pfadkarte:
Es fühlt sich ein bisschen wie eine Zeitleiste an, und wenn Sie mit der Maus über jeden Block fahren, wird ein Dropdown-Effekt angezeigt, um die Screenshot-Informationen zu erweitern. Der Effekt fühlt sich ziemlich gut an. Ich habe allerdings das Gefühl, dass dieser Effekt für eine dynamische Addition nicht sehr flexibel erscheint, da die Höhe nicht so flexibel angepasst werden kann wie die Breite, sondern einzeln eingestellt werden muss. Viele davon dienen lediglich zur Darstellung von Effekten. Natürlich habe ich basierend auf dieser Idee auch einige einfachere ähnliche Effekte erstellt, hauptsächlich den Gesamtlayouteffekt, und ich werde nicht jeden einzelnen Inhalt imitieren. Ich habe auch eine Eröffnungsanimation hinzugefügt, um es interessanter zu machen ... Schauen wir uns zunächst die Wirkung an:
Das ist alles. Kommen wir ohne weitere Umschweife gleich zur Sache: HTML-Struktur:
<div Klasse="Zeitzone">
<div Klasse="Zeit">
<h2>02.07.2015</h2>
<div>
<p>Rage-Event, Saison 1</p>
<ul>
</ul>
</div>
</div>
<div Klasse = "timeLeft" Stil = "top: 100px;">
<h2>02.07.2015</h2>
<div>
<p>Rage-Event, Saison 2</p>
<ul>
</ul>
</div>
</div>Ich habe hier die HTML-Struktur vereinfacht. Die Klasse .time stellt die rechte Seite dar, und .timeLeft stellt die linke Seite dar. Dann füge ich nur noch einige Ränder hinzu. Ich habe den Inhalt in jedem Block gelöscht. Der CSS-Stylecode lautet wie folgt:
Körper{
Hintergrund: #333;
}
h1{
Textausrichtung: zentriert;
Farbe: #fff;
}
.Zeitzone{
Breite: 6px;
Höhe: 350px;
Hintergrund: hellblau;
Rand: 0 automatisch;
Rand oben: 50px;
Rahmenradius: 3px;
Position: relativ;
-webkit-animation: Slide-Höhe 2 s linear;
}
@-webkit-keyframes HöheSlide{
0 %{
Höhe: 0;
}
100 %{
Höhe: 350px;
}
}
.Zeitzone:nach{
Inhalt: „Fortsetzung folgt …“;
Breite: 100px;
Farbe: #fff;
Position: absolut;
Rand links: -35px;
unten: -30px;
-webkit-animation: ShowIn 4s Leichtigkeit;
}
.Zeitzone .Zeit,.Zeitzone .ZeitLeft{
Position: absolut;
Rand links: -10px;
Rand oben: -10px;
Breite: 20px;
Höhe: 20px;
Randradius: 50 %;
Rand: 4px durchgezogen rgba(255,255,255,0,5);
Hintergrund: hellblau;
-webkit-Übergang: alle 0,5 s;
-webkit-animation: ShowIn-Leichtigkeit;
}
.Zeitzone .Zeit:n-tes-Kind(1){
-Webkit-Animationsdauer: 1 s;
}
.Zeitzone .timeLeft:nth-child(2){
-Webkit-Animationsdauer: 1,5 s;
}
.Zeitzone .Zeit:n-tes-Kind(3){
-Webkit-Animationsdauer: 2 s;
}
.Zeitzone .timeLeft:nth-child(4){
-Webkit-Animationsdauer: 2,5 s;
}
@-webkit-keyframes showIn{
0 %, 70 % {
Deckkraft: 0;
}
100 %{
Deckkraft: 1;
}
}
.timezone .time h2,.timezone .timeLeft h2{
Position: absolut;
Rand links: -120px;
Rand oben: 3px;
Farbe: #eee;
Schriftgröße: 14px;
Cursor:Zeiger;
-webkit-animation: ShowIn 3s-Animation;
}
.Zeitzone .TimeLeft h2{
Rand links: 60px;
Breite: 100px;
}
.timezone .time:hover,.timezone .timeLeft:hover{
Rand: 4px, durchgehend hellblau;
Hintergrund: Zitronenchiffon;
Kastenschatten: 0 0 2px 2px rgba(255,255,255,0,4);
}
.timezone .time div, .timezone .timeLeft div{
Position: absolut;
oben: 50 %;
Rand oben: -25px;
links: 50px;
Breite: 300px;
Höhe: 50px;
Hintergrund: hellblau;
Rand: 3px durchgezogen #eee;
Rahmenradius: 10px;
Z-Index: 2;
Überlauf: versteckt;
Cursor:Zeiger;
-webkit-animation: ShowIn 3s-Animation;
-webkit-Übergang: alle 0,5 s;
}
.Zeitzone .timeLeft div{
links: -337px;
}
.timezone .time div:hover,.timezone .timeLeft div:hover{
Höhe: 170px;
}
.Zeitzone .Zeit div p,.Zeitzone .timeLeft div p{
Farbe: #fff;
Schriftstärke: fett;
Textausrichtung: zentriert;
}
.timezone .time:vorher,.timezone .timeLeft:vorher{
Inhalt: '';
Position: absolut;
oben: 0px;
links: 32px;
Breite: 0px;
Höhe: 0px;
Rand: 10px durchgehend transparent;
Rahmen rechts: 10px durchgezogen #eee;
z-Index: -1;
-webkit-animation: ShowIn 3s-Animation;
}
.timezone .timeLeft:before{
links: -33px;
Rand: 10px durchgehend transparent;
Rahmen links: 10px durchgezogen #eee;
}
.timezone .time div ul,.timezone .timeLeft div ul{
Listenstil: keiner;
Breite: 300px;
Polsterung: 5px 0 0;
Rahmen oben: 2px durchgezogen #eee;
Farbe: #fff;
Textausrichtung: zentriert;
}
.timezone .time div li, .timezone .timeLeft div li{
Anzeige: Inline-Block;
Höhe: 25px;
Zeilenhöhe: 25px;
}Dieser CSS-Style-Code dient nur als Referenz. Er ist nicht sehr praktisch und nicht sehr gut organisiert. Der Hauptzweck besteht darin, die Animationseffekte und das Gesamtlayout zu verstehen. Beste Wünsche! Originallink: https://www.cnblogs.com/jr1993/p/4779678.html Oben finden Sie Einzelheiten zur Implementierung von Zeitleisteneffekten mit CSS3. Weitere Informationen zu CSS3-Zeitleisteneffekten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
>>: Details zur MySQL-Sortierfunktion
Artikel empfehlen
Eine kurze Erläuterung der Concat-Funktion in MySQL. So fügen Sie in MySQL vor oder nach einem Feld eine Zeichenfolge hinzu
So verwenden Sie die Concat-Funktion in MySQL: CO...
Geben Sie einige Tipps zur Verwendung von JavaScript-Operatoren
Inhaltsverzeichnis 1. Optionaler Verkettungsopera...
So konfigurieren Sie einfach mehrere Server in Nginx
1: Ich werde nicht näher auf die Installation von...
So erstellen Sie eine gespeicherte Prozedur in MySQL und fügen Datensätze in einer Schleife hinzu
Dieser Artikel beschreibt anhand eines Beispiels,...
Erläuterung des Problems bei der Auswahl des MySQL-Speicherzeittyps
Der datetime-Typ wird normalerweise zum Speichern...
Detaillierter Installationsprozess und Konfiguration von mysql5.7.19 zip
Offizielle Version von MySQL v5.7.19 (32/64-Bit-I...
vue-table implementiert das Hinzufügen und Löschen
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie HTML-Tabellen (um den visuellen Effekt einer Webseite anzuzeigen)
Wir wissen, dass wir beim Verwenden von HTML im N...
Lösung für das Problem mit verstümmelten chinesischen MySQL-Zeichen
1. Die chinesischen verstümmelten Zeichen erschei...
Ideen und Codes zur Realisierung des Lupeneffekts in js
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung von Cgroup, dem Kernprinzip von Docker
Das leistungsstarke Tool cgroup im Kernel kann ni...
SQL-Implementierung von LeetCode (197. Steigende Temperatur)
[LeetCode] 197.Steigende Temperatur Schreiben Sie...
Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger
Ich habe vor kurzem HTML neu gelernt, was als neue...
Detaillierter Prozess zum Konfigurieren eines HTTPS-Zertifikats unter Nginx
1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...
Detaillierte Erklärung des Codes zur Implementierung linearer Farbverläufe mit CSS3
Vorwort In der Demonstration [IE9-] ist der Farbv...