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
Kreisförmiger Fortschrittsbalken mit CSS implementiert
Ergebnisse erzielen Implementierungscode html <...
Detaillierte Erklärung des Skript-Debugging-Mechanismus in Bash
Ausführen des Skripts im Debugmodus Sie können da...
Docker konfiguriert den Speicherort lokaler Images und Container
Verwenden Sie den Befehl „Find“, um Dateien zu fi...
Mehrere Möglichkeiten zum Verschlüsseln und Entschlüsseln von MySQL (Zusammenfassung)
Inhaltsverzeichnis Vorne geschrieben Zwei-Wege-Ve...
JavaScript BOM-Standortobjekt + Navigatorobjekt + Verlaufsobjekt
Inhaltsverzeichnis 1. Standortobjekt 1. URL 2. Ei...
Statische IP-Konfigurationsmethode für die Centos8-Brücke in der virtuellen VMware-Maschine
1. Stellen Sie sicher, dass die Netzwerkverbindun...
Tutorial zur Installation von MySQL 5.7.18 unter Windows 10
In diesem Tutorial erfahren Sie alles über die In...
So stellen Sie Go-Webanwendungen mit Docker bereit
Inhaltsverzeichnis Warum brauchen wir Docker? Bei...
Vue nutzt Amap zur Realisierung der Stadtpositionierung
In diesem Artikel wird der spezifische Code von V...
Mysql-Datumsformatierung und komplexe Datumsbereichsabfrage
Inhaltsverzeichnis Vorwort Anwendungsszenarios fü...
Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage
Inhaltsverzeichnis Problembeschreibung 1. Basislö...
Kalendereffekt basierend auf jQuery
In diesem Artikelbeispiel wird der spezifische Co...
Docker startet im Status „Beendet“
Nach dem Docker-Lauf ist der Status immer „Beende...
Eine kurze Analyse des Unterschieds zwischen und und wo in der MySQL-Verbindungsabfrage
1. Erstellen Sie eine Tabelle CREATE TABLE `stude...
Tutorial zur Installation des GreasyFork-JS-Skripts auf dem Mobiltelefon
Inhaltsverzeichnis Vorwort 1. Iceraven-Browser (F...