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

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/

css雪碧（CSS Sprite）和css3过渡效果综合应用的更多相关文章

  1. 关于css雪碧图sprite

    天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就 ...

  2. CSS雪碧，即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

  3. 使用compass自动合并css雪碧图(css sprite)

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

  4. CSS Sprite、CSS雪碧图应用实例

    CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...

  5. 移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂

    为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例gi ...

  6. Css雪碧图

    Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

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

    雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...

  8. 【前端】CSS雪碧

    百度百科:http://baike.baidu.com/link?url=jblMCCF77bq7egbJ-9SudRmvXdwlQVVOq5D9MEEniQgJR-Lqanfrnjzwmgu7ato ...

  9. css雪碧技术的用法。

    ---恢复内容开始--- 在目前前端开发阶段,页面会出现大量的小图片,服务器加载的时候比较吃力,怎么用 一种办法把图片都合并到一张图片上呢?这就用到了css雪碧技术. 雪碧技术是雪碧团队开发,也有人叫 ...

随机推荐

  1. Windows安装mapnik

    windows安装mapnik,首先去官网下载windows压缩包:http://mapnik.org/,解压位置C:\mapnik-v2.2.0 然后下载安装python2.7,安装位置  C:\P ...

  2. Docker搭建Mysql容器

    转载自:http://blog.csdn.net/Mungo/article/details/78521832?locationNum=9&fps=1 本文介绍如何使用docker迅速搭建My ...

  3. win7下mysql免安装版使用

    1.下载. 下载地址:http://downloads.mysql.com/archives/get/file/mysql-5.6.17-winx64.zip. 2.解压MySQL压缩包 解压到指定目 ...

  4. WPF save listbox config

    UI <Grid x:Class="WzlyTool.ReplyContentUI" xmlns="http://schemas.microsoft.com/win ...

  5. c# 菜鸟包裹查询

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  6. 20155331 丹增旦达 网络攻防 Exp2后门原理与实践

    20155331 丹增旦达<网络攻防>Exp2后门原理与实践 实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启 ...

  7. linux下通过软连接实现访问项目路径外面的资源

            在javaweb项目开发中,图片上传是个比较常见的场景.一般都是在项目路径下建个文件夹,然后上传到该文件夹下:这样这个图片就可以和静态资源一样被直接访问.这样的好处就是访问这图片特别方 ...

  8. Linux环境下使用n更新node版本失败的原因与解决

    Linux环境为CentOS 6.5 64位,阿里云低配服务器...学生优惠,然而下个月即将过期,真是个悲伤的故事 很久之前就安装了node,但是一直没有进行过升级,近日因为将部分异步代码更新为采用原 ...

  9. Jq_javascript跨域问题

    为什么浏览器不能跨域   现在很多人特别是前端开发人员,在ajax请求,XMLHttpRequest的过程中会碰到一个问题,那就是跨域请求: 当我们javaScript脚本试图跨域访问时,浏览器会告诉 ...

  10. 使用devstack/pike部署多节点实验

    目录 第一步:安装Ubuntu16.04 server并以stack为用户名创建用户 第二步:安装git及相关配置 第三步:安装Open vSwitch 2.5.X 第四步:获取devstack脚本 ...