Div + CSS effect (Achieving smooth voting effect, etc)

The name of this technique isCSS SpriteThe basic principle is to use the background-image, background-repeat, and background-position attributes of the image background series in CSS. In this way, the key to achieving Image Display acceleration is not to reduce the weight, but to reduce the number of images. Generally, the transmission time of an image is much smaller than the request waiting time.

PS: three examples of CSS Sprites have been created. If you are interested, you can take a look.

Instance
For example, Google .cn now uses this method for the bottom navigation of the home page.
Picture used: http://www.ccvita.com/wp-content/uploads/demo/css/google.gif
Effect: http://www.google.cn

Code
I have found several demos on the Internet. You can see the demonstration of the following url: CSS Sprites instance demonstration.
Effect 1: Portrait background image

Effect 2: horizontal background image

Effect 3: smooth voting

 

From: http://www.ccvita.com/322.html#more-322