10 models based on HTML5+CSS3 implementation of the source of the animation

1.CSS3 Simple and refreshing drop-down menu

For the CSS3 menu we have already shared a lot before, there are gorgeous animation menu, also has the impact of visual 3D menu, today is to introduce a simple and practical drop-down menu, green theme style, so that the menu looks very fresh, the drop-down menu color and the main menu color collocation is also very good.

Online Demo

SOURCE download

2.HTML5 text effects for custom background images

Before the HTML5 and CSS3 standards come out, the text background can only be a solid color, let alone a custom background image. However, the powerful HTML5 not only allows the text background to support the gradient color, but also supports a custom background image, which is like a masking layer, making the text background colorful.

Online Demo

SOURCE download

3.CSS3 Custom beautify ul ol list

This is the type of CSS3 effect that we haven't shared before, it's a CSS3 app that can customize the list of UL and OL. When we move the mouse over each list item, there will be a certain animation effects, the effect is very good. There are 3 types of this list beautification style, the most cool glow effect.

Online Demo

SOURCE download

4. The animation submission form based on the jquery UI

Today we are going to share an animated submission form based on the jquery UI. The effect of this submission form is to animate the information that is required to fill in the list.

Online Demo

SOURCE download

5. Beautiful navigation with pure CSS implementation

Today to share a pure CSS implementation of the beautiful navigation. Before we shared the Personal Center navigation menu that jquery implemented, today it is also suitable for personal center. Also brings the icon, the effect is good.

Online Demo

SOURCE download

6. Elastic Slide Transition effect

Share a flexible slide transition effect, and when you switch the content area there will be a wobble, dynamic, which is based on Snap.svg (a powerful and intuitive SVG animation content manipulation API) and morphing SVG paths-svg path morphing technology developed.

Online Demo

SOURCE download

7. Easy-to-use jquery music player Plugin

A very simple and easy-to-use jquery player code, Web page compatibility is good, can support IE7, IE8 and other low-version browser, UI design is very good-looking, can be used as a material music file path in JS can be changed.

Online Demo

SOURCE download

8. Page drop down while the top navigation is gradually shrinking and fixing to the top

When the page drop is more than 200 pixels, the top navigation shrinks and is always pinned to the top of the page, whereas when the page moves up, less than 200 pixels, the navigation reverts back to its original height size.

Online Demo

SOURCE download

9.3 Different pictures left and right full screen toggle effect

Up and down the picture to keep full screen, the picture takes absolute path, do not worry about the path problem, click Left and Right Picture button, the picture is divided into three different ways to do the switch.

Online Demo

SOURCE download

10.CSS3 mouse hover picture animated text effect

Different styles of mouse hover picture text animation effect, is the use of CSS3 implementation.

Online Demo

SOURCE download

10 models based on HTML5+CSS3 implementation of the source of the animation