DIV+CSS效果(实现平滑投票效果等)_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:28:48
Original
1417 people have browsed it

这种技巧的名称叫做CSS Sprite,基本原理就是利用CSS中图片background系列的 background-image、background-repeat、background-position等属性实现。通过这种方式达到图片显示 加速的关键,不是降低重量,而是减少个数。在通常情况下一张图片的传输时间,通常远小于请求等待的时间。

PS:特别制作了三个CSS Sprites实例演示,感兴趣的朋友可以看一看。

实例
比如google.cn现在首页的底部导航也是用这个方式实现的。
所用图片为:http://www.ccvita.com/wp-content/uploads/demo/css/google.gif
效果:http://www.google.cn

代码
从网上找了好几个演示,大家可以看下面地址的演示:CSS Sprites实例演示
效果一:纵向背景图

效果二:横向背景图

效果三:平滑投票

 

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!