Let your heart HTML5 & CSS3 effect "with source download"

The collection of this set of HTML5 & CSS3 effect, some of the web site development commonly used, practical functions, there are some advanced Web technology application demonstration. Either way, the techniques in these cases are worth exploring and learning.

Stunning HTML5 particle effect progress bar

I like the effects of particle works, especially those that can be applied to the actual, such as the progress bar written by Jack Rugile based on HTML5 Cavnas. Look at such a dazzling Loading effect, even let me wait for a little while, it is no harm:)

SOURCE Download Online Demo

Use CSS3 to create a set of fine-textured, silky-smooth buttons

CSS3 introduces many new features that are powerful, making it easy for designers and developers to create a variety of beautiful interface effects. Here are some shiny shiny buttons, pretty, right? Hover your mouse over the button and have a sporty, shiny moving effect.

SOURCE Download Online Demo

Pure CSS drawing of the Simpsons character Avatar

A set of pure CSS drawings of the "Simpsons" avatars. The Simpsons (The Simpsons) is an animated sitcom Matt Groening for the American Fox Broadcasting Corporation.

SOURCE Download Online Demo

CSS & JQuery Make a beautiful colorful clock

You may have seen a variety of clock effects, such as the novelty of the animated clock, which was popular many years ago, and now Web developers are using the latest technologies like CSS3 and Canvas.

SOURCE Download Online Demo

I was dumbfounded! There's such a realistic raindrop effect.

Rainyday.js is a lightweight JavaScript library that uses HTML5 Canvas to animate the drop of raindrops on the glass surface. Rainyday.js as much as possible to simulate the actual raindrop effect, can almost be real.

SOURCE Download Online Demo

HTML5 Canvas simulates ripped fabric effect

This is a HTML5 Canvas application demo that mimics the effect of a ripped cloth, with realistic results. You'll see that with Canvas 's powerful drawing and animation capabilities, you can take your breath away with minimal code.

SOURCE Download Online Demo

SVG for a nice page preload effect

Shows how to use CSS animations, SVG and JavaScript to create a simple page preload effect. For websites, these pre-loaded images provide a creative way to keep users from getting bored while waiting for content to load.

SOURCE Download Online Demo

Combining CSS3 & Canvas to simulate the effects of people walking

HTML5 and CSS3 technology have brought new tools to the Web, igniting the passion of Web developers. The so-called only unexpected, did not do, it is true. Let's share a CSS3 & Canvas simulation of human walking animation.

SOURCE Download Online Demo

HTML5 high-fidelity 3D fabric pattern effect

HTML5 specification introduces many new features, one of the most anticipated is the canvas element, HTML5 Canvas provides a way to draw graphics through JavaScript , very powerful. Let's share a HTML5 Canvas-drawn 3D cloth pattern effect.

SOURCE Download Online Demo

Thumbnail album with CSS3 sparkle effect

Shinetime is a very refined thumbnail photo album, the mouse hover over the thumbnail when there is a very dazzling flash effect, based on the implementation of CSS3 , in addition to the thumbnail image will have three-dimensional movement effect.

SOURCE Download Online Demo

Achieve stunning Loading (load) animation effects

Spinkit is a set of Web page animations that contains 8 awesome loading animations based on the CSS3 implementation. Create smooth, easy-to-customize animations with CSS3 Animation's powerful features.

SOURCE Download Online Demo

Related articles that may be of interest to you

• Web front-end developers and designers must read the essence of the article recommended
• Carefully selected excellent jquery Ajax page plug-ins and tutorials
• 12 Amazing ideas for 404 error page Design
• Let the website Move! 12 Excellent jQuery animation plugins
• 8 Cutting-Edge HTML5 & CSS3 effects "with source download"

This article links: let your heart HTML5 & CSS3 effect "attached source download"

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

This article comes from "Dream Sky (http://www.cnblogs.com/lhb25/)"