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

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. 蓝桥杯之 2n皇后问题（双层dfs，暴力）

    Description 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后 和n个白皇后,使任意的两个黑皇后都不在同一行.同一列或同一条对角线上,任意的两 个白皇后都不在同 ...

  2. python3 Beautifulsoup <class 'bs4.element.ResultSet'> <class 'bs4.element.Tag'> 取值

    1.<class 'bs4.element.ResultSet'>  这里是字典外套了一个列表  textPid = pid[0] 2.<class 'bs4.element.Tag ...

  3. MVC 在action方法中获取当前action的控制器名和action名

    如何在某个action方法中获取它所在的控制器和action名称呢. string controllerName = Request.RequestContext.RouteData.Values[& ...

  4. MVC的BundleConfig类

    在BundleConfig.cs文件中,包含了一些应用程序中使用的脚本和样式表的文件路径.并可以使用通配符.示例如下: using System.Web; using System.Web.Optim ...

  5. 20155233 刘高乐 Exp9 Web安全基础

    WebGoat 输入java -jar webgoat-container-7.1-exec.jar 在浏览器输入localhost:8080/WebGoat,进入WebGoat开始实验 Cross- ...

  6. 微信小程序云开发之云函数创建

    云函数 云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写.一键上传部署即可运行后端代码. 小程序内提供了专门用于云函数调用的 API.开发者可以在云函数内使用 wx-server-sdk ...

  7. 数据库历险记（二） | Redis 和 Mecached 到底哪个好？

    文章首发于微信公众号「陈树义」,专注于 Java 技术分享的社区.点击链接扫描二维码,与500位小伙伴一起共同进步.微信公众号二维码 http://p3npq6ecr.bkt.clouddn.com/ ...

  8. Linux+Nginx+Asp.net Core及守护进程部署

    上篇<Docker基础入门及示例>文章介绍了Docker部署,以及相关.net core 的打包示例.这篇文章我将以oss.offical.site站点为例,主要介绍下在linux机器下完 ...

  9. 用 IIS 搭建 mercurial server

    mercurial server 对于代码管理工具,更多的人可能对 Git 更熟悉一些(Git太火了).其实另外一款分布式代码管理工具也被广泛的使用,它就是 mercurial.当多人协作时最好能够通 ...

  10. Nginx+IIS分布式部署和负载均衡

    1.IIS中部署2个网站 创建2个网站,端口分别为9001.9002 2.下载Nginx 可以进入Nginx官网进行下载,官网地址: http://nginx.org/,需要下载windows版的 3 ...