css雪碧(CSS Sprite)和css3过渡效果综合应用

在网页中我们经常可以看到,有些图片在鼠标经过的时候,有一个上下或左右的滑动效果,很实用页很方便,今天正好用到,拿来和大家分享一下,有什么不对或意见欢迎指正。

html部分如下,这里本来打算用jq来着,后来没有用到。。

话不多说直接上代码。。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>css雪碧(CSS Sprite)和css3过渡效果综合应用</title>
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <!--<script src="../../jQuery v1.4.2/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>-->
  <script src="js/style.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <div class="sideBar">
  <ul class="sideBar_u">
    <li><a class="sideBar_g gbm1" href="javascript:;"></a></li>
    <li><a class="sideBar_g gbm2" href="javascript:;"></a></li>
    <li><a class="sideBar_g gbm3" href="javascript:;"></a></li>
    <li><a class="sideBar_g gbm4" href="javascript:;"></a></li>
  </ul>
</div>
</body>
</html>

css部分

li,ul{margin:0;padding:0}
li{list-style-type:none}
a{text-decoration:none}
body{background:#183741}
.sideBar{float:left;margin:0;padding:0}
.sideBar_u{float:left;background:#112F35}
.sideBar ul li{height:63px;width:276px;margin:0 0 5px 0}
.sideBar ul li a{height:62px;width:276px;display:block}
.sideBar_g{background:url(../img/linkBtn.png);-webkit-transition-property:background-position;-webkit-transition-duration:.5s;-moz-transition-property:background-position;-moz-transition-duration:.5s;transition-property:background-position;transition-duration:.5s}
a.gbm1{background-position:0 -224px}
a.gbm1:hover{background-position:0 -288px}
a.gbm2{background-position:-276px -224px}
a.gbm2:hover{background-position:-276px -288px}
a.gbm3{background-position:-552px -224px}
a.gbm3:hover{background-position:-552px -288px}
a.gbm4{background-position:-828px -224px}
a.gbm4:hover{background-position:-828px -288px}

配合上你想要展示的图片,和背景定位,一个实用美观的效果就写好了。

附上链接  http://xf.wolade.com/demo2/demo2/

时间: 2024-10-10 15:41:56

css雪碧(CSS Sprite)和css3过渡效果综合应用的相关文章

使用compass自动合并css雪碧图(css sprite)(转载)

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大.也正是因为这一点,导致很多开发者懒于使用css雪碧图. 对于这种耗时.枯燥.重复性的工作,最好的解决方法还是交给工具去处理.本文就介绍下怎样使用compass来自动合并css雪碧图. 安装compass 首先请确认电脑已经安装ruby及sass环境,ruby及sass的安

CSS雪碧,即CSS Sprite 简单的例子

CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{background:url(img.png) no-repeat;} .Lighthouse{height:768px;width:1024px;background-position:0 0;} .Koala{height:768px;width:1024px;background-position:0 -768px

CSS雪碧的那些事儿

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量.该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签. 实现效果的实例: div { width:

CSS雪碧图的一个小案列

以前只是听说过雪碧图没用过,然后来了这里做的第一个活儿就涉及到他.因为怕不会用,就用他们原来切的,那个调的费事啊,算那个background-position困难的啊.原因是他们的雪碧图切放在了一起,没有留有空隙,所以,只能用一个废标签去专门放一个图标.现在发现雪碧图还是很有用的,把所有要用的图片放在一起,然后根据定位来调出要用的图片很方便. 随便写了个小demo:http://codepen.io/tianzi77/pen/xGGMBO 参照网站底部鼠标放上去的时候有一个切换效果. 代码也很简

css中雪碧图(sprite)的使用及制作方法

雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一张图:  2.雪碧图的使用 首先确定要使用的图标的位置和大小(可以通过ps测量), 如下的雪碧图大小统一,排列规则 它们的大小均为30px*30px,第一个图标位置为0 0,第二个的位置为30px 0,依次... 样式可以这样写: 1 .box1 li:nth-child(1) { 2 width:

css雪碧图

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量.该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签. 一个简单的例子: 一张图片作出一个按钮的三个状态   一个链接用CSS做成按钮的样式,我们可以使用同一张图片,完成按钮的三个状态,a:link,a:hover,a:active. <a class="but

精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术

精灵图 精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术 原理:将多张单一的图片整合到一张图上,以背景引入,并使用background-position调整背景位置,使之显示不同图片 目的:降低浏览器向服务器的请求次数,提高网页加载速度 优点:降低请求次数,多张图整合成一张降低整体大小,整改一张图使得整体风格主题改变,提高维护性 缺点:自适应布局难控制,制作繁琐,不合理的整合图片会导致调用混乱,一张图更改导致整体变化(牵一发动全身) <div class="s

css sprite,css雪碧图生成工具V3.0更新

什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视觉效果,而且对于不稳定的网络带宽,加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及加速页面渲染 2.后期维护简单 该工具可以直接通过选择图片

css 雪碧图 及jquery定位代码

无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(sprite) 也叫雪碧图. CSS知识点: background-image backgorund-position 特点: 相对于当个小图标,它节省文件体积和服务请求次数.将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片,所以合理的利