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/)"