2014 HTML5/CSS3 popular animation effects TOP10_jquery

1. Simulated real-life running animation special effects implemented by HTML5 CSS3

Today I want to share a cool simulation of real-person running animation. It is mainly realized by using HTML5/CSS3 technology combined with the switching of multiple pictures. The realism of this HTML5 animation is that the characters are very rhythmic when running, and there are projections of the characters. What's more important is that as the character runs closer and closer, the size of the character will also increase. Much like a little boy running from a distance.

Online demo

Source code download

2. Four focus map plug-in special effects implemented by jQuery that support different custom image switching

The source code L_slide.js of four focus map plug-in special effects implemented by jQuery that supports different custom image switching is a focus map animation special effects code that can realize custom image switching. This code contains four focus map switching effects. .

Online demo

Source code download

3. Super cool brush drawing animation effects implemented in HTML5

Today we are going to share a cool HTML5 brush animation. We can choose different brush shapes. There are 5 different shapes for you to choose from. When the brush moves on the canvas, a very gorgeous animation will play. animation effects. And the color of the animation will also gradually change over time.

Online demo

Source code download

4. Original focus image carousel with left and right button animation implemented by JS

The original focus image carousel implemented by JS with left and right button animation special effects source code is a focus image carousel code that is very suitable for use in any website web page. The code is composed of original JS and not only has left and right click buttons. , and you can also click on the dots at the bottom of the picture to choose to view the picture.

Online demo

Source code download

5. Album list implemented by jquery to display text animation when the mouse slides over the card

The special effects source code of the photo album list implemented by jquery when the mouse slides over the flip card to display text animation. It is a special effects code that can realize the special effects code that can realize the picture flip animation to display text when the mouse slides over the hovering picture.

Online demo

Source code download

6.div css realizes the dynamic text description pop-up when the mouse passes the album list below

div css realizes the dynamic special effects source code of the album list when the mouse passes the bottom and the text description pops up. It is a piece of code implemented by pure DIV CSS. This code is implemented. When the mouse hovers over the picture, the picture shrinks and the relevant text description pops up below the picture. .

Online demo

Source code download

7. Full-screen banner with thumbnails and focus image switching between left and right arrows implemented by jquery

The source code of the focus picture special effect of the banner full screen with thumbnails and left and right arrow switching implemented by jquery is a focus picture code that can realize the full screen horizontal direction with thumbnails and left and right arrow switching functions. Friends who need this code can go to to download and use.

Online demo

Source code download

8. Use canvas to draw a cool clock

HTML5 Canvas is equivalent to a drawing board. You can draw anything on Canvas. Today I want to share a method and code for drawing a stunning clock using HTML5 Canvas. It is very beautiful. I recommend it to everyone

Online demo

Source code download

9. 3D side-lying menu effects implemented with CSS3

Today we will share a 3D menu special effect implemented in CSS3. The characteristic of this 3D menu is that it lies on its side on the page. It also has beautiful animations when expanding the submenu, and the submenu also presents a 3D effect. You can Download the source code of this menu for study and research.

Online demo

Source code download

10.Animate.css is a css3 animation library with multiple text effects

Animate.css has a css3 animation library effect source code with multiple text effects. It is a css3 animation library code with dozens of text effects. Here we can select the animation effects to be loaded for the text.

Online demo

Source code download