DIV+CSS效果(实现平滑投票效果等)_html/css_WEB-ITnose
程序员文章站
2022-05-10 09:28:07
...
这种技巧的名称叫做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
推荐阅读
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
js实现图片切换效果_html/css_WEB-ITnose
-
js实现图片切换效果_html/css_WEB-ITnose
-
jquery+div如何实现frameset效果?_html/css_WEB-ITnose
-
怎么实现鼠标移动到导航栏文章变化效果_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
用html5实现涂擦效果?_html/css_WEB-ITnose
-
CSS如何实现段落首字符缩进两个字符效果_html/css_WEB-ITnose
-
求帮忙,这个网站的背景效果是怎么实现的?http://thefoxwp.com/_html/css_WEB-ITnose