DIV CSS effect (to achieve smooth voting effect, etc.)_html/css_WEB-ITnose

The name of this technique is called CSS Sprite. The basic principle is to use the background-image, background-repeat, background-position and other attributes of the image background series in CSS. The key to accelerating picture display in this way is not to reduce the weight, but to reduce the number. Under normal circumstances, the transmission time of a picture is usually much shorter than the request waiting time.

PS: Three CSS Sprites example demonstrations have been specially produced. Interested friends can take a look.

Example
For example, the bottom navigation of the current homepage of google.cn is also implemented in this way.
The image used is: http://www.ccvita.com/wp-content/uploads/demo/css/google.gif
Effect: http://www.google.cn

Code
I found several demos from the Internet. You can see the demo at the following address: CSS Sprites Example Demonstration
Effect 1: Vertical Background Image

Effect 2 : Horizontal background image

Effect 3: Smooth voting

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