Die vernachlässigten Spezialeffekte von META-Tags (Seitenübergangseffekte)
|
Durch die Verwendung von JS im Webdesign können viele Seiteneffekte erzielt werden, aber viele Leute ignorieren die leistungsstarke Wirkung von META-Tags in HTML-Tags. Tatsächlich können mit Meta-Tags auch viele schöne Seitenübergangseffekte erzielt werden. Das META-Tag ist ein Hilfstag im HEAD-Bereich der HTML-Sprache. Das Meta-Tag wird im <head>...</head> jeder Webseite platziert. Darunter sind wir alle vertraut mit: <meta name="GENERATOR" content="Microsoft FrontPage 3.0">//Beschreibungsbearbeitungstool; <meta name="KEYWORDS" content="...">//Beschreibung der Schlüsselwörter; <meta name="DESCRIPTION" content="...">//Beschreibung der Homepage; Es stellt Informationen bereit, die für den Benutzer nicht sichtbar sind. Meta-Tags werden normalerweise verwendet, um das Seitenthema für Suchmaschinenroboter zu definieren oder Cookies in Benutzerbrowsern zu definieren. Sie können verwendet werden, um Autoren zu identifizieren, Seitenformate festzulegen, Inhaltszusammenfassungen und Schlüsselwörter zu markieren. Sie können auch festlegen, dass Seiten sich entsprechend der von Ihnen definierten Zeitintervalle selbst aktualisieren, RASC-Inhaltsebenen festlegen usw. In diesem Artikel wird hauptsächlich erläutert, wie Meta-Tags verwendet werden, um Seitenübergangseffekte zu erzielen ... Verwendung: <Meta http-equiv="Seite eingeben" Inhalt="blendTrans(Dauer=0,5)"> <Meta http-equiv="Seite verlassen" Inhalt="blendTrans(Dauer=0,5)"> blendTrans ist ein dynamischer CSS-Filter, der einen Überblendeffekt erzeugt. Ein weiterer dynamischer Filter, RevealTrans, kann ebenfalls für Seitenein- und -austrittseffekte verwendet werden: Dynamische Filter können der Seite bewegte Einblend-, Ausblend- und Bildtransformationseffekte hinzufügen. Sie können in zwei Typen unterteilt werden: Überblenden und Aufdecken. Ersteres kann Objekte allmählich verschwinden oder erscheinen lassen und letzteres bietet 24 Bildtransformationseffekte … <Meta http-equiv="Seite eingeben" Inhalt="revealTrans(Dauer=x, Übergang=y)"> <Meta http-equiv="Seite verlassen" Inhalt="revealTrans(Dauer=x, Übergang=y)"> Dauer: Gibt die Dauer des Filtereffekts an (Einheit: Sekunden) Übergang: Filtertyp. Gibt mit einem Wert von 0-23 an, welcher Spezialeffekt verwendet werden soll. ------------------------------------------------------------------------------------------------ 0: Rechteck verkleinern1: Rechteck vergrößern2: Kreis verkleinern3: Kreis vergrößern4: Von unten nach oben aktualisieren5: Von oben nach unten aktualisieren6: Von links nach rechts aktualisieren7: Von rechts nach links aktualisieren8: Vertikale Jalousien9: Horizontale Jalousien10: Horizontale Jalousien versetzt11: Vertikale Jalousien versetzt12: Punktverteilung13: Von links nach rechts zur Mitte aktualisieren14: Von der Mitte nach links und rechts aktualisieren15: Von der Mitte nach oben und unten16: Von oben und unten zur Mitte17: Von unten rechts nach oben links18: Von oben rechts nach unten links19: Von oben links nach unten rechts20: Von unten links nach oben rechts21: Horizontaler Balken22: Vertikaler Balken23: Wählen Sie zufällig einen der oben 22 Typen aus ------------------------------------------------------------------------------------------------ Bei richtiger Verwendung können Transformationseffekte von Webseiten einen sehr tiefen Eindruck bei den Besuchern hinterlassen, selbst bei denen, die ursprünglich nicht an Ihrer Site interessiert waren. Insbesondere diejenigen Freunde, die lernen möchten, wie man Webseiten erstellt, kopieren möglicherweise Ihre Webseite zu Studien- und Forschungszwecken. Tatsächlich haben Sie nur ein kurzes Codestück hinzugefügt ^_^ Übergangseffekte für Webseiten (Trans) werden in vier Kategorien unterteilt: „Eine Webseite aufrufen“ (Page-Enter), „Eine Webseite verlassen“ (Page-Exit), „Eine Site aufrufen“ (Site-Enter) und „Eine Site verlassen“ (Site-Exit). Jede Hauptkategorie ist in 25 Unterkategorien unterteilt. Nehmen wir als Beispiel den Seiteneintragseffekt: Auswirkung beim Aufrufen der Webseite 1. Der Code des Blending-Effekts lautet wie folgt: <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"> 2. Der Code für den kastenförmigen Schrumpfeffekt lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)"> 3. Der Code für den kastenförmigen Strahlungseffekt lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)"> 4. Der Code des kreisförmigen Schrumpfeffekts lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)"> 5. Der Code des kreisförmigen Strahlungseffekts lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)"> 6. Der Code des Aufwärtswischeffekts lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)"> 7. Der Code des Abwärtswischeffekts lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)"> 8. Der Code für den richtigen Löscheffekt lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)"> 9. Der Code für den Wischeffekt nach links lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)"> 10. Der Code des vertikalen Maskierungseffekts lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)"> 11. Der Code des horizontalen Maskierungseffekts lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)"> 12. Der Code für den horizontalen Schachbretteffekt lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)"> 13. Der Code des vertikalen Schachbretteffekts lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)"> 14. Der Code für den nachfolgenden Zerlegungseffekt lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)"> 15. Der Code für den linken und rechten Einzugseffekt lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)"> 16. Der Code für den Erweiterungseffekt von der Mitte nach links lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)"> 17. Der Code für den Einrückungseffekt von oben nach unten lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)"> 18. Der Code für den zentralen Auf- und Abwärtserweiterungseffekt lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)"> 19. Extrahieren Sie den Effektcode unten links wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)"> 20. Extrahieren Sie den Effektcode oben links wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)"> einundzwanzig. Extrahieren Sie den Effektcode aus der unteren rechten Ecke wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)"> zweiundzwanzig. Extrahieren Sie den Effektcode aus der oberen rechten Ecke wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)"> dreiundzwanzig. Der Code für den zufälligen horizontalen Linieneffekt lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)"> vierundzwanzig. Der Code für den zufälligen vertikalen Linieneffekt lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)"> 25. Der Code des Zufallseffekts lautet wie folgt: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)"> Lassen Sie uns nun diese Codes analysieren. Zunächst einmal können Sie sehen, dass die meisten dieser Codes sehr ähnlich sind. Obwohl es viele Kategorien gibt, entsprechen die 25 Unterkategorien unter jeder Hauptkategorie tatsächlich denselben Kategorien und werden durch Nummern identifiziert (mit Ausnahme des Mischeffekts blendTrans(Duration=1.0)). Es ist also nicht nötig, für jede Hauptkategorie einzeln Beispiele anzugeben. Ersetzen Sie einfach „Page-Enter“ durch „Page-Exit“ (Webseite verlassen), „Site-Enter“ (Site betreten), „Site-Exit“ (Site verlassen), und Sie können den gewünschten Effekt erzielen. Das ist auch leichter zu merken. Mit „Dauer=1,0“ lässt sich die Dauer jedes Zyklus in Sekunden festlegen (die aktuelle Einstellung beträgt 1 Sekunde pro Zyklus). Dabei ist zu beachten, dass auf einer Webseite zwar die vier Hauptkategorien von Effekten gleichzeitig eingestellt werden können, jedoch pro Hauptkategorie jeweils nur ein Effekt eingestellt werden kann. Darüber hinaus wird der Effekt nicht angezeigt, wenn es sich bei der Webseite um eine Frame-Seite handelt. |
<<: Beispielcode zur Implementierung transparenter Verlaufseffekte mit CSS
Artikel empfehlen
Zusammenfassung der JS-Tipps zum Erstellen oder Füllen von Arrays beliebiger Länge
Inhaltsverzeichnis Vorwort Direktfüllmethode für ...
So löschen Sie die Hintergrundfarbe des A-Tags, wenn in H5 darauf geklickt wird
1. Die blaue Farbe des Tags wird aufgehoben, wenn...
Lernen Sie eine Minute am Tag, den Git-Server zu verwenden, um Debug-Zweige anzuzeigen und zu beheben
Debug-Zweig Während der normalen Entwicklung eine...
CSS Acht auffällige HOVER-Effekt-Beispielcodes
1. Effekt-HTML senden <div id="senden-btn...
Detaillierte Erklärung der API in Vue.js, die leicht zu übersehen ist
Inhaltsverzeichnis nächstesTick Syntaxvereinfachu...
Grundlegender JSON-Betriebsleitfaden in MySQL 5.7
Vorwort Aufgrund der Projektanforderungen werden ...
Detaillierte Erläuterung von 5 Lösungen für das adaptive CSS-Layout für Fortgeschrittene
Vorwort Beim Erstellen einer Seite stoßen wir häu...
Vollständiges Tutorial zur Installation von Apache, MySQL, PHP, LAMP auf Ubuntu 18.04
1. Installieren Sie Apache $ sudo apt update &...
Füllen Sie die Suchfunktion auf der HTML-Seite aus
Ich habe kürzlich an einem Framework gearbeitet, ...
Installationsschritte von Docker-CE auf dem Raspberry Pi 4b Ubuntu19-Server
Das Raspberry Pi-Modell ist 4b, 1 G RAM. Das Syst...
Docker-Bindung mit fester IP/Hostübergreifender Container-Gegenzugriffsvorgang
Vorwort Bisher waren statische IPs, die über Pipe...
Detaillierte Analyse des Reaktionsprinzips und der bidirektionalen Daten von Vue
Verstehen von object.defineProperty, um Reaktions...
Der gesamte Prozess der Optimierung des ersten Ladens einer Vue-Seite
Inhaltsverzeichnis Vorwort 1. Bildoptimierung 2. ...
Grafisches Tutorial zum Herunterladen und Installieren von MySQL 5.7 und höher
1. Herunterladen 1. Download-Adresse der offiziel...
Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS 7.4 64-Bit
Schritt 1: Holen Sie sich die MySQL YUM-Quelle Ge...