11 amazing HTML5 and pure CSS3 animation source code,

11 amazing HTML5 and pure CSS3 animation source code,
1. jQuery multi-function accordion personal information menu panel

This is a jQuery-based accordion personal information menu panel. After each menu item is expanded, you can customize the layout. Therefore, you can implement multiple functions for each menu item. This multi-function menu also has the jQuery/CSS3 screen drop-down menu, which is very practical. This accordion menu is based on the jQuery framework, so it is highly compatible and practical.

Online Demo

Source code download

2. Pure CSS3 horizontal accordion sharing button menu

We have shared a lot about accordion animation in the past, including jQuery-based accordion menus, such as jQuery multi-layer vertical accordion menus, and jQuery-based accordion focus diagrams, for example, jQuery achieves the focal point effect of horizontal accordion images. Today we will share a horizontal accordion sharing button menu that is implemented using pure CSS3. Each sharing button will be briefly introduced on this platform, which is very elegant and practical.

Online Demo

Source code download

3. HTML5 WebGL particle explosion Animation

We have previously shared several very cool HTML5 particle animations, such as the HTML5 pixel crushing image animation and the HTML5 Canvas Color Pixel progress bar animation, all of which use the HTML5 particle rendering feature. Today we will share another particle explosion animation effect based on HTML5 and WebGL, which is amazing.

Online Demo

Source code download

4. Cool and realistic CSS 3 3D book flip Animation

We have previously shared several jQuery book flip plug-ins and HTML5 book flip animations with different styles. Several of them are good, such as jQuery book flip 3D animation effects and HTML5 3D book flip effects. Today, I want to share a CSS 3-based 3D book flip animation. Currently, this animation does not support mouse interaction, but can only automatically open and close pages.

Online Demo

Source code download

5. Ultra-practical jQuery fade-in and fade-out focus chart plug-in with 3D Photo Frames

This is a focus chart plug-in based on jQuery and CSS3. This focus chart is designed to automatically play a series of photos. When switching between photos, it has animated effects that fade in and out, it is also very convenient to use. Another feature is that this jQuery focus chart plug-in presents a 3D photo frame with a black background.

Online Demo

Source code download

6. HTML5 Canvas character limbs simulation and body collision Animation

A few days ago, we just shared with you an HTML5-based animation for simulating the movements of the limbs and joints of a person. It can simulate the stretching of the person's head and limbs, which is quite realistic. The HTML5 Canvas animation that we want to introduce today adds an animation effect for body collision simulation on the basis of the original four limbs simulation. We use the mouse to simulate a large iron ball, after moving the mouse, the big iron ball hits the body of the character. After the body is forced, the body will flip in a certain direction, so the limbs also stretch and swing. Of course, this animation also applies the gravity sensing feature of HTML5. This similar animation has been introduced before, for example, the gravity sensing Effect of HTML5 image album.

Online Demo

Source code download

7. animation effects of partial magnifiers in HTML5 lattice Columns

I remember we previously shared a cool HTML5 3D particle wave animation effect, which consists of a series of lattice columns. The 3D effect is very cool. Today, we will introduce an HTML5-based animation special effect for dot matrix columns. When the mouse slides over the array, the partial part of the array will produce an animation special effect for the magnifier and also have a strong 3D visual effect.

Online Demo

Source code download

8. Implement card flip animation with a perceptible orientation in pure CSS3

Today, we want to share with you a simple but interesting pure CSS3 animation effect. When we move the mouse over a card, the card can be flipped. This should be easy, it is also very common. You must say that this flip animation can be implemented by using the CSS3 feature. However, this CSS3 card flip animation has a unique feature, that is, it can perceive the direction of the flip, that is, it can determine the flip angle based on the direction of the user's mouse slide, for example, if the mouse slides from top to bottom, the card is flipped vertically. If the mouse slides from left to right, the card is flipped horizontally. You can study its CSS source code to help you learn CSS3.

Online Demo

Source code download

9. jQuery SVG left-right auto switch full screen focus Animation

Today, we will share with you a very fashionable and atmospheric jQuery full-screen focus animation. This focus chart plug-in has two features. One is that the focus chart is displayed in full screen mode as a whole, it looks very atmospheric, and there are 3D shadows around the image, the three-dimensional visual effect is very unique. The second is that the focus chart is quite fashionable when it is switched to an animation that fades in and out elastically. Animations use SVG-related features and are very flexible in expansion.

Online Demo

Source code download

10. Implement ultra-Cool Firefly animation with pure CSS3

Today we will bring you an interesting pure CSS3 animation. This time we will use some animation properties of CSS3 to draw a glittering Firefly, similar to the previously shared pure CSS3 grasshopper and pure CSS3 lighter, this firefly is also drawn with CSS3, and click the firefly to close and open its wings, while the glow of the firefly can also be controlled.

Online Demo

Source code download

11. CSS3 achieves a colorful 3D rotating planet

We have previously shared a lot of Sphere animations implemented by pure CSS3 and HTML5, such as the HTML5 3D sphere dot Motion Animation and HTML5 Canvas Earth Rotation 3D animation. Today I want to share with you another super cool CSS3 colorful 3D rotating planet, which has a rather shocking visual effect.

Online Demo

Source code download

• Fixed Link: http://www.i7758.com/archives/2681.html