1. Pure CSS3 for ultra-cool tape animations
We want to use pure CSS3 to achieve a cool tape animation effect. First with pure CSS3 to draw a tape appearance, or quite lifelike, and then with the CSS3 animation properties to achieve the rotation of the tape, as in playing songs, if with HTML5 audio playback function, and that tape player almost.
Online Demo
SOURCE download
2.HTML5 Imitation Apple Watch clock animation
Shortly after Apple Watch was released, a foreign Daniel had imitated its clock-and-watch interface with HTML5, and the HTML5 imitation of Apple Watch was dynamic, and the pointer data could be updated in real time based on local time. The interface of the clock is very gorgeous, it does have Apple's style, and HTML5 is very powerful indeed.
Online Demo
SOURCE download
3. Pure CSS3 and SVG mouse slide over bulb glow effect
This time to share a use of pure CSS3 and SVG to achieve the light bulb glow effect, we just need to slide the mouse over the bulb, the entire bulb will appear shiny animated effects, the effect is quite realistic. The use of CSS3, let the light bulb periphery has a layer of faint halo. It also has a fade-out effect when the light is lit and turned off.
Online Demo
SOURCE download
4.FancyBox-the classic jQuery Lightbox plugin
FancyBox is a very good pop-up window plugin that provides an elegant popup zoom for images, HTML content, and other tasks for multimedia content. As one of the most popular Lightbox plugins, adaptive functionality can be achieved through Fittoview.
Main Features:
The ability to display the contents of pictures, HTML elements, SWF movies, iframe frames, and AJAX requests
You can customize the look and functionality with configuration and CSS
A set of content can be navigated
Supports scrolling event-driven browsing
There's a nice projection underneath the zoomed-in project.
Online Demo
SOURCE download
Full-screen switching effect with 5.jquery implementation
Today to bring you a full-screen switch implemented by jquery, the right side has a circular small mark, each point a switch one screen. Of course, you can also scroll the mouse to toggle the page.
Online Demo
SOURCE download
6. How to use HTML5 Canvas to make water ripple effect
Today, we continue to share examples of the effects of JavaScript implementations, and this article describes the use of JavaScript for water ripple effects. The water wave effect takes the picture as the background, the click image anywhere will trigger. Sometimes, we can create a very interesting solution using normal Javascript.
Online Demo
SOURCE download
7.HTML5 Canvas realizes the Dream 3D Hedgehog Ball
Today to bring you a HTML5 canvas to achieve the dream of 3D hedgehog ball. The page is fantastic.
Online Demo
SOURCE download
8.HTML5 canvas for picture glass fragment effects
Today to bring you a HTML5 canvas implementation of the picture glass fragment effect. The picture appears in the form of a glass fragment to the interface, and then the effect of the broken glass is gradually message.
Online Demo
SOURCE download
9.CSS3 implementation of mouse through button effects
Today for each netizen to bring a CSS implementation of the mouse through the button effect. When the button is initially, the border is a broken button, and the animation changes to a closed border when the mouse passes over the button.
Online Demo
SOURCE download
10.CSS3 Transitions Properties Create animated Download button effects
A website's download button should try to attract readers ' attention. This means that the Web designer should attach great importance to the download interface of the file. A page so many files, slices, videos and plugins can be shared via direct HTTP download. Many free websites even publish icon sets and PSD files for users to download for free. In these elements a lot of page download buttons are very important. Here is an animated download button for everyone.
Online Demo
SOURCE download
Share Web front end 10 classic jquery effects preview and source download