Source Code of 10 animations Based on html5 + css3,

Source Code of 10 animations Based on html5 + css3,

1. CSS3 simple and fresh drop-down menu

We have already shared a lot about CSS3 menus before, including gorgeous animated menus and 3D menus with visual impact. Today we will introduce a simple and practical drop-down menu, the green theme style makes the menu look fresh. The color of the drop-down menu and the color of the main menu are also very good.

Online Demo

Source code download

2. Text effects of HTML5 custom background images

Before HTML5 and CSS3 standards come out, the text background can only be solid color, not to mention custom background images. However, the powerful HTML5 not only allows the text background to support gradient colors, but also supports custom background images. These images are like the mask layer, making the text background colorful.

Online Demo

Source code download

3. CSS3 customize and beautify the ul ol list

This is a special CSS3 effect type that we have not shared before. It is a CSS 3 application that can customize the beautification UL and OL list. When we move the mouse over each list item, there will be some animation effects, the effect is very good. There are three types of list beautification styles, with the cool luminous effect.

Online Demo

Source code download

4. jquery ui-based animation submission form

Today I want to share with you an animation submission form based on jquery ui. The effect of this form is to list the information required in sequence in the form of an animation.

Online Demo

Source code download

5. Beautiful navigation implemented by pure css

Today we will share with you a beautiful navigation that is implemented with pure css. I have previously shared with you the personal center navigation menu implemented by jquery. Today, this is also suitable for personal centers. It also brings icons, and the effect is good.

Online Demo

Source code download

6. Elastic Slide Switching Effect

Share an Elastic Slide switching effect. When you switch the content area, it will shake and be dynamic. The effect is based on Snap. developed by svg (a powerful and intuitive SVG animation content manipulation API) and morphing SVG paths-SVG path deformation technology.

Online Demo

Source code download

7. Easy-to-use jQuery music Player Plug-in

A very simple and easy-to-use jQuery player code. The webpage has good compatibility and supports IE7, IE8, and other low-version browsers. The UI design is very nice, the path of the music file that can be used as the clip can be changed in js.

Online Demo

Source code download

8. When the webpage is pulled down, the top navigation is gradually reduced and fixed on the top.

When the page drop-down is more than 200 pixels, the top navigation will be reduced and always fixed at the top of the page. Otherwise, when the page moves up, less than 200 pixels, the navigation will be restored to the original height.

Online Demo

Source code download

9.3 full screen switching between the left and right sides of different images

The top, bottom, and left images are in full screen mode, and the images adopt absolute paths. You don't have to worry about Path Problems. Click the left and right images button and switch between images in three different ways.

Online Demo

Source code download

10.css 3 hover the mouse over the image and animated text Effect

Different styles of mouse hover image text animation effects are implemented using css3.

Online Demo

Source code download