Inhaltsverzeichnis
A collection ofPage Transitions
Heim Web-Frontend HTML-Tutorial 赞!超炫的页面切换动画效果【附源码下载】_html/css_WEB-ITnose

赞!超炫的页面切换动画效果【附源码下载】_html/css_WEB-ITnose

Jun 24, 2016 pm 12:02 PM
下载 切换 动画 效果 源码

  在下面的示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果。虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D Transforms)来创造一些立体动感的效果。

 

立即下载      在线演示

 

  温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

  CSS 动画根据它们的实现的效果分为不同的组。为展示页面过渡效果,我们使用以下结构:

<div id="pt-main" class="pt-perspective">    <div class="pt-page pt-page-1">        <h1 id="span-A-collection-of-span-strong-Page-strong-Transitions"><span>A collection of</span><strong>Page</strong> Transitions</h1>    </div>    <div class="pt-page pt-page-2"><!-- ... --></div>    <!-- ... --></div>
Nach dem Login kopieren

  透视容器的位置是相对的,我们增加1200像素透视它。所有动画效果都需要以下的样式:

.pt-perspective {    position: relative;    width: 100%;    height: 100%;    perspective: 1200px;    transform-style: preserve-3d;} .pt-page {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    visibility: hidden;    overflow: hidden;    backface-visibility: hidden;    transform: translate3d(0, 0, 0);} .pt-page-current,.no-js .pt-page {    visibility: visible;} .no-js body {    overflow: auto;} .pt-page-ontop {    z-index: 999;}
Nach dem Login kopieren

  上面的 .pt-page-ontop 样式用于某些页面过渡效果,即我们需要让一个页面留在另一个页面的顶部。下面是一个代码例子,展示了动画类和关键帧动画,在不同方向上缩放网页和以及淡入淡出效果:

/* scale and fade */ .pt-page-scaleDown {    animation: scaleDown .7s ease both;} .pt-page-scaleUp {    animation: scaleUp .7s ease both;} .pt-page-scaleUpDown {    animation: scaleUpDown .5s ease both;} .pt-page-scaleDownUp {    animation: scaleDownUp .5s ease both;} .pt-page-scaleDownCenter {    animation: scaleDownCenter .4s ease-in both;} .pt-page-scaleUpCenter {    animation: scaleUpCenter .4s ease-out both;} /************ keyframes ************/ /* scale and fade */ @keyframes scaleDown {    to { opacity: 0; transform: scale(.8); }} @keyframes scaleUp {    from { opacity: 0; transform: scale(.8); }} @keyframes scaleUpDown {    from { opacity: 0; transform: scale(1.2); }} @keyframes scaleDownUp {    to { opacity: 0; transform: scale(1.2); }} @keyframes scaleDownCenter {    to { opacity: 0; transform: scale(.7); }} @keyframes scaleUpCenter {    from { opacity: 0; transform: scale(.7); }}
Nach dem Login kopieren

  对于本演示的目的,我们采用了相应的动画类应用到当前页以及即将切换进来的页面,例如:

//... case 17:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromRight pt-page-ontop';    break;case 18:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromLeft pt-page-ontop';    break;case 19:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromBottom pt-page-ontop';    break; // ...
Nach dem Login kopieren

  查看演示,您可以通过点击第一个按钮来浏览一整套的页面切换效果,您也可以选择从下拉菜单中选择一个特定的效果进行预览。

  我希望你会喜欢这个并从中得到启发,创作出一些更加令人兴奋的东西!

 

立即下载      在线演示

 

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Apr 03, 2024 am 08:13 AM

Möglicherweise sind Sie schon einmal auf das Problem gestoßen, dass auf dem Bildschirm Ihres Smartphones grüne Linien erscheinen. Auch wenn Sie es noch nie gesehen haben, müssen Sie entsprechende Bilder im Internet gesehen haben. Haben Sie schon einmal erlebt, dass der Bildschirm einer Smartwatch weiß wird? Am 2. April erfuhr CNMO aus ausländischen Medien, dass ein Reddit-Benutzer ein Bild auf der sozialen Plattform geteilt hatte, auf dem zu sehen war, wie der Bildschirm der Smartwatches der Samsung Watch-Serie weiß wurde. Der Benutzer schrieb: „Ich war gerade dabei, aufzuladen, und als ich zurückkam, war es so. Ich habe versucht, neu zu starten, aber der Bildschirm der Samsung Watch wurde beim Neustart immer noch weiß.“ Der Reddit-Benutzer hat das Smartwatch-spezifische Modell nicht angegeben. Dem Bild nach zu urteilen dürfte es sich jedoch um eine Samsung Watch5 handeln. Zuvor hatte sich auch ein anderer Reddit-Benutzer gemeldet

Was soll ich tun, wenn ich das Hintergrundbild einer anderen Person herunterlade, nachdem ich mich bei WallpaperEngine bei einem anderen Konto angemeldet habe? Was soll ich tun, wenn ich das Hintergrundbild einer anderen Person herunterlade, nachdem ich mich bei WallpaperEngine bei einem anderen Konto angemeldet habe? Mar 19, 2024 pm 02:00 PM

Wenn Sie sich auf Ihrem Computer beim Steam-Konto einer anderen Person anmelden und das Konto dieser anderen Person über eine Hintergrundsoftware verfügt, lädt Steam automatisch die Hintergrundbilder herunter, die für das Konto der anderen Person abonniert wurden, nachdem Sie zu Ihrem eigenen Konto zurückgewechselt haben Deaktivieren der Steam-Cloud-Synchronisierung. Was tun, wenn WallpaperEngine die Hintergrundbilder anderer Personen herunterlädt, nachdem Sie sich bei einem anderen Konto angemeldet haben? 1. Melden Sie sich bei Ihrem eigenen Steam-Konto an, suchen Sie in den Einstellungen nach der Cloud-Synchronisierung und deaktivieren Sie die Steam-Cloud-Synchronisierung. 2. Melden Sie sich bei dem Steam-Konto einer anderen Person an, bei dem Sie sich zuvor angemeldet haben, öffnen Sie den Wallpaper Creative Workshop, suchen Sie nach den Abonnementinhalten und kündigen Sie dann alle Abonnements. (Falls Sie das Hintergrundbild in Zukunft nicht mehr finden, können Sie es zunächst abholen und dann das Abonnement kündigen.) 3. Wechseln Sie zurück zu Ihrem eigenen Steam

Wie lade ich Links herunter, die mit 115:// beginnen? Methodeneinführung herunterladen Wie lade ich Links herunter, die mit 115:// beginnen? Methodeneinführung herunterladen Mar 14, 2024 am 11:58 AM

In letzter Zeit haben viele Benutzer den Editor gefragt, wie man Links herunterlädt, die mit 115:// beginnen? Wenn Sie Links herunterladen möchten, die mit 115:// beginnen, müssen Sie den 115-Browser verwenden. Nachdem Sie den 115-Browser heruntergeladen haben, schauen wir uns das unten vom Herausgeber zusammengestellte Download-Tutorial an. Einführung zum Herunterladen von Links, die mit 115:// beginnen. 1. Melden Sie sich bei 115.com an, laden Sie den 115-Browser herunter und installieren Sie ihn. 2. Geben Sie Folgendes ein: chrome://extensions/ in die Adressleiste des 115-Browsers, rufen Sie das Extension Center auf, suchen Sie nach Tampermonkey und installieren Sie das entsprechende Plug-in. 3. Geben Sie in die Adressleiste des Browsers 115 ein: Grease Monkey Script: https://greasyfork.org/en/

Einführung in das Herunterladen und Installieren des Superpeople-Spiels Einführung in das Herunterladen und Installieren des Superpeople-Spiels Mar 30, 2024 pm 04:01 PM

Das Superpeople-Spiel kann über den Steam-Client heruntergeladen werden. Die Größe dieses Spiels beträgt normalerweise eineinhalb Stunden. Hier ist ein spezielles Download- und Installations-Tutorial. Neue Methode zur Beantragung globaler geschlossener Tests 1) Suchen Sie nach „SUPERPEOPLE“ im Steam-Store (Steam-Client-Download) 2) Klicken Sie unten auf der „SUPERPEOPLE“-Store-Seite auf „Zugriff auf geschlossene SUPERPEOPLE-Tests anfordern“ 3) Nachdem Sie auf geklickt haben Schaltfläche „Zugriff anfordern“. Das Spiel „SUPERPEOPLECBT“ kann in der Steam-Bibliothek bestätigt werden. 4) Klicken Sie auf die Schaltfläche „Installieren“ in „SUPERPEOPLECBT“ und laden Sie es herunter

Mar 18, 2024 am 10:58 AM

foobar2000 ist eine Software, die Ihnen jederzeit Musik aller Art mit verlustfreier Klangqualität bietet Spielen Sie das erweiterte Audio auf dem Computer ab, um ein bequemeres und effizienteres Musikwiedergabeerlebnis zu ermöglichen. Das Interface-Design ist einfach, klar und benutzerfreundlich. Es nimmt einen minimalistischen Designstil an, ohne übermäßige Dekoration Es unterstützt außerdem eine Vielzahl von Skins und Themes, personalisiert Einstellungen nach Ihren eigenen Vorlieben und erstellt einen exklusiven Musikplayer, der die Wiedergabe mehrerer Audioformate unterstützt. Außerdem unterstützt es die Audio-Gain-Funktion zum Anpassen der Lautstärke Passen Sie die Lautstärke entsprechend Ihrem Hörzustand an, um Hörschäden durch zu hohe Lautstärke zu vermeiden. Als nächstes lass mich dir helfen

Wo kann man Dateien von Quark Network Disk herunterladen_So laden Sie Quark Network Disk in den lokalen Bereich herunter und teilen ihn Wo kann man Dateien von Quark Network Disk herunterladen_So laden Sie Quark Network Disk in den lokalen Bereich herunter und teilen ihn Mar 21, 2024 pm 03:57 PM

Als praktisches und praktisches Tool für Netzwerkfestplatten kann Quark Benutzern dabei helfen, ihre bevorzugten Ressourcen einfach abzurufen. Was ist, wenn Sie eine Datei lokal herunterladen möchten? Lassen Sie sich jetzt vom Redakteur erzählen, lernen wir es gemeinsam! So laden Sie Quark Network Disk zur lokalen Freigabe herunter: 1. Öffnen Sie zunächst die Quark-Software, rufen Sie die Startseite auf und klicken Sie auf das [Cloud-Symbol] unten rechts. 2. Klicken Sie dann auf der Quark Network Disk-Seite auf die Funktion [Dokument]. 3. Gehen Sie dann zur Dokumentseite, wählen Sie die Datei aus, die Sie herunterladen möchten, und klicken Sie auf das [Drei-Punkte-Symbol] 4. Nach dem letzten Klick klicken wir im Popup-Dialogfeld auf [Herunterladen].

Können UC-Videos nicht heruntergeladen werden? Wie lade ich Videos im UC-Browser herunter? Können UC-Videos nicht heruntergeladen werden? Wie lade ich Videos im UC-Browser herunter? Mar 20, 2024 pm 08:51 PM

UC Browser ist ein Browser, den jeder verwendet. Er ermöglicht jedem ein einzigartiges Online-Erlebnis. Er ist äußerst praktisch und kann nach einer Vielzahl von Ressourcen suchen, von denen Sie auf anderen Plattformen nicht profitieren können Der Inhalt ist sehr spannend und kann nicht aufhören, das Video jederzeit anzusehen Ich habe es mir angesehen, es war sehr praktisch. Ich habe die spezifische Methode zum Herunterladen des Videos herausgefunden. So laden Sie Videos über den UC-Browser auf den lokalen Computer herunter: 1. Öffnen Sie den UC-Browser, klicken Sie auf die Menüleiste und wählen Sie „Herunterladen/Video“. 3. Klicken Sie auf die Videoauswahl

So laden Sie Douyin-Videos herunter und speichern sie So laden Sie Douyin-Videos herunter und speichern sie Mar 25, 2024 pm 09:46 PM

Wie lade ich Douyin-Videos herunter und speichere sie? Die meisten Benutzer wissen nicht, wie man Douyin-Videos herunterlädt und speichert . Text-Tutorial, interessierte Nutzer kommen vorbei! Anleitung zur Verwendung von Douyin: So laden Sie Douyin-Videos herunter und speichern sie. 1. Öffnen Sie zunächst die Douyin-Kurzvideo-APP, rufen Sie die Hauptseite auf und klicken Sie rechts auf die Schaltfläche [Teilen]. 2. Danach wird die Multifunktionsleiste angezeigt Erweitern Sie es unten und schieben Sie es nach rechts, um das Symbol [Lokal speichern] zu finden. 3. Dann müssen Sie auf den Download warten. Dann wird der Rand [Gespeichert, gehen Sie bitte zum Album, um es anzuzeigen] angezeigt. 4. Springen Sie schließlich zum Klicken Sie auf die Albumseite und Sie können sehen, dass das gerade heruntergeladene Video gespeichert wurde.

See all articles