Share 10 web front-end source preview downloads based on CSS3 and HTML5

1. Pure CSS3 Simulation BBQ Animation

Today to share a very creative CSS3 animation, this animation simulates a barbecue rack, the food on the grill is also made of pure CSS3, without a picture, the effect is quite realistic. Another interesting thing is that the CSS3 Grill also smokes and simulates the barbecue scene.

Online Demo

SOURCE download

2. Pure CSS3 to achieve character running animation

Do you remember the CSS3 character walking animation that we shared before? The animation is really awesome. Today we will share a CSS3-based character running animation, running animation is very simple, running characters just sketched out with some lines, through the curves and movements of these lines to form a running animation effect.

Online Demo

SOURCE download

3. Pure CSS3 Responsive Paging plugin

This time we want to see a pure CSS3 implementation of the responsive paging plug-in, for the paging plugin, we have also shared some before, are based on the jquery paging plug-in. This CSS3 page plug-in can fully customize the style of the page bar, including the background color of the mouse slide, the number of page numbers, and the buttons to page back and forth.

Online Demo

SOURCE download

4. Pure CSS3 Implement Close button 6 Group custom button style

CSS3 doesn't just make some cool animations, and if you're creative, CSS3 can help you implement simple and useful web apps. Today to share a pure CSS3 implementation of the Close button, it looks like these close buttons is very monotonous, but you can see carefully look at a total of 6 different styles, if you want to add a custom close button in a page window, then you can refer to this CSS3 application.

Online Demo

SOURCE download

5.CSS3 message prompt box with icon

Before we shared a CSS3 and jquery with the progress bar message prompt box, today we will share a CSS3 with the icon of the message prompt box, the tip of the box on the right side of a representative small icon, very beautiful. The application of CSS3 technology can make the four corners of the message box achieve rounded corners.

Online Demo

SOURCE download

6.CSS3 Vertical Accordion Folding Menu

We've shared a lot about accordion menus before, both horizontally and vertically. The CSS3 vertical accordion folding menu is also very good today, and this CSS3 accordion menu has a small icon for each item, and there can only be one expansion, and more interestingly, the arrows on the right side of the menu folding and unwinding will also have a good animation effect.

Online Demo

SOURCE download

7.HTML5 Fireball Baffle Collision Animation game

Remember the HTML5 canvas flame flicker animation you shared before, and the animations are awesome. Today we are going to share a super cool HTML5 fireball Baffle Collision animation game. There is a fireball on the screen movement, you can move the mouse to slide the screen below the bezel, fireball collision to the bezel, you can bounce out, this is a very special HTML5 game.

Online Demo

SOURCE download

8.HTML5/CSS3 Disc Stopwatch animated stopwatch can pause timing

The clock applications for HTML5 and CSS3 have been shared quite a bit before, and there are some HTML5 date selection applications. Today we are going to share a disc stopwatch animation based on HTML5 and CSS3, which can be accurate to 0.001 seconds and can pause during the timekeeping process while the stopwatch can be reset at any time.

Online Demo

SOURCE download

Version 9.3D HTML5 mock dress tearing animation

Remember the HTML5 canvas mock dress tearing animation I shared with you a long while ago? This is definitely a very creative and fun HTML5 animation. Today we share its 3D version, on the original basis, clothing fabric 3D ring display, you can also use the mouse to drag and drop clothes, but unlike before, the left mouse button to drag and drop clothes, the right mouse button to cut clothes, lost before the degree of mouse force and clothing fragmentation degree of relationship, There seems to be some missing features, but the HTML5 3D function is good.

Online Demo

SOURCE download

10. Circular navigation menu implemented by pure CSS3

Before you introduced several navigation menus, today to bring you a pure CSS3 implementation of the circular navigation menu. The navigation is fresh, the list icon is in the middle, and when you click the list icon, the items are distributed over the four week of the list chart. Form a ring.

Online Demo

SOURCE download

Share 10 web front-end source preview downloads based on CSS3 and HTML5