Heim  >  Artikel  >  Web-Frontend  >  2014 HTML5/CSS3 beliebte Animationseffekte TOP10_jquery

2014 HTML5/CSS3 beliebte Animationseffekte TOP10_jquery

WBOY
WBOYOriginal
2016-05-16 16:28:461213Durchsuche

1. Simulierte reale Laufanimations-Spezialeffekte, implementiert durch HTML5 CSS3

Heute möchte ich eine coole Simulation einer laufenden Animation durch eine reale Person teilen. Sie wird hauptsächlich durch die Verwendung von HTML5/CSS3-Technologie in Kombination mit dem Wechseln mehrerer Bilder realisiert. Der Realismus dieser HTML5-Animation besteht darin, dass die Charaktere beim Laufen sehr rhythmisch sind und es Projektionen der Charaktere gibt. Was noch wichtiger ist: Je näher der Charakter kommt, desto größer wird er auch. Ähnlich wie ein kleiner Junge, der aus der Ferne rennt.

Online-Demo

Quellcode-Download

2. Vier von jQuery implementierte Focus Map-Plug-in-Spezialeffekte, die verschiedene benutzerdefinierte Bildwechsel unterstützen

Der von jQuery implementierte Quellcode L_slide.js für vier Focus-Map-Plug-In-Spezialeffekte, der verschiedene benutzerdefinierte Bildumschaltungen unterstützt, ist ein Fokus-Map-Animations-Spezialeffektcode, der benutzerdefinierte Bildumschaltungen realisieren kann. Dieser Code enthält vier Focus-Map-Umschalteffekte . .

Online-Demo

Quellcode-Download

3. Super coole Pinselzeichnungsanimationseffekte, implementiert in HTML5

Heute werden wir eine coole HTML5-Pinselanimation teilen. Es gibt 5 verschiedene Formen, aus denen Sie wählen können. Wenn sich der Pinsel auf der Leinwand bewegt, werden sehr schöne Animationseffekte abgespielt . Und auch die Farbe der Animation wird sich im Laufe der Zeit allmählich ändern.

Online-Demo

Quellcode-Download

4. Ursprüngliches Fokusbildkarussell mit Animation der linken und rechten Maustaste, implementiert von JS

Das von JS implementierte Original-Fokusbildkarussell mit Animations-Spezialeffektquellcode für die linke und rechte Taste ist ein Fokusbildkarussellcode, der sich sehr gut für die Verwendung auf jeder Website-Webseite eignet. Der Code besteht nicht nur aus Original-JS Klicken Sie mit der linken und rechten Maustaste auf die Schaltflächen , und Sie können auch auf die Punkte am unteren Rand des Bildes klicken, um das Bild anzuzeigen.

Online-Demo

Quellcode-Download

5. Von jquery implementierte Albumliste, um eine Textanimation anzuzeigen, wenn die Maus über die Karte gleitet

Der von jquery implementierte Spezialeffekt-Quellcode der Fotoalbumliste, wenn die Maus über die Flip-Karte bewegt wird, um eine Textanimation anzuzeigen. Es handelt sich um einen Spezialeffektcode, der den Spezialeffektcode realisieren kann, der die Bild-Flip-Animation realisieren kann Text anzeigen, wenn die Maus über das schwebende Bild gleitet.

Online-Demo

Quellcode-Download

6.div CSS realisiert das dynamische Textbeschreibungs-Popup, wenn die Maus über die Albumliste unten

fährt

div css realisiert den dynamischen Spezialeffekt-Quellcode der Albumliste, wenn die Maus über den unteren Rand fährt und die Textbeschreibung angezeigt wird. Es handelt sich um einen Code, der durch reines DIV-CSS implementiert wird Über dem Bild wird das Bild verkleinert und die entsprechende Textbeschreibung erscheint unter dem Bild.

Online-Demo

Quellcode-Download

7. Vollbild-Banner mit Miniaturansichten und Fokusbildumschaltung zwischen linken und rechten Pfeilen, implementiert durch jquery

Der Quellcode des von jquery implementierten Fokusbild-Spezialeffekts des Banners im Vollbildmodus mit Miniaturansichten und Umschalten der linken und rechten Pfeile ist ein Fokusbildcode, der die horizontale Richtung des Vollbilds mit Miniaturansichten und Funktionen zum Umschalten der linken und rechten Pfeile realisieren kann Freunde, die diesen Code benötigen, können ihn unter herunterladen und verwenden.

Online-Demo

Quellcode-Download

8. Zeichnen Sie mit Leinwand eine coole Uhr

HTML5 Canvas entspricht einem Zeichenbrett. Heute möchte ich eine Methode und einen Code zum Zeichnen einer atemberaubenden Uhr mit HTML5 Canvas teilen

Online-Demo

Quellcode-Download

9. Mit CSS3 implementierte 3D-Seitenmenüeffekte

Heute werden wir einen in CSS3 implementierten 3D-Menü-Spezialeffekt vorstellen. Das Besondere an diesem 3D-Menü ist, dass es beim Erweitern des Untermenüs auch schöne Animationen aufweist Wirkung Sie können den Quellcode dieses Menüs für Studien- und Forschungszwecke herunterladen.

Online-Demo

Quellcode-Download

10.Animate.css ist eine CSS3-Animationsbibliothek mit mehreren Texteffekten

Animate.css verfügt über einen CSS3-Animationsbibliothekscode mit mehreren Texteffekten. Es handelt sich um einen CSS3-Animationsbibliothekscode mit Dutzenden von Texteffekten. Hier können wir die Animationseffekte auswählen, die für den Text geladen werden sollen.

Online-Demo

Quellcode-Download

Stellungnahme:
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