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

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. rownum与row_number() OVER (PARTITION BY COL1 ORDER BY COL2)

    1)rownum 为查询结果排序.使用rownum进行排序的时候是先对结果集加入伪列rownum然后再进行排序 select rownum n, a.* from ps_user a order by ...

  2. cleanCode[1]：有意义的命名

    为什么要有意义的命名: 我们都曾经说过有朝一日再回头清理那些糟糕的代码,然而最终总是弃之不顾.稍后等于永不,我们需要立即行动,写优雅的代码. 写代码的过程中,读占的比例很大,所以首先要让代码易读. 有 ...

  3. WPF编程，TextBlock中的文字修饰线（上划线，中划线，基线与下划线）的使用方法。

    原文:WPF编程,TextBlock中的文字修饰线(上划线,中划线,基线与下划线)的使用方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_4330 ...

  4. 基于代的垃圾回收机制--《CLR via C#》读书笔记

    我们知道,垃圾回收在内存无限大的理想情况下是不需要的,正是因为内存存在的瓶颈,我们才需要垃圾回收.在<垃圾回收算法之引用计数算法>和<垃圾回收算法之引用跟踪算法>两篇文章中,我 ...

  5. Android开发——断点续传原理以及实现

    0.  前言 在Android开发中,断点续传听起来挺容易,在下载一个文件时点击暂停任务暂停,点击开始会继续下载文件.但是真正实现起来知识点还是蛮多的,因此今天有时间实现了一下,并进行记录.本文原创, ...

  6. MFC CTreeCtrl运用

    CTreeCtrl运用 删除无效资源 递归的运用 自写遍历目录函数 递归遍历所有子目录 一.删除无效资源 .打开资源文件 .找到无效链接删掉 二.自写遍历目录函数 CFileFind findfile ...

  7. cocos2d-x学习记录6——自定义Button

    cocos2d-x中封装CCMenuItem等相关按钮,但是有些时候需要自己封装按钮,这样能够更加灵活的实现对应功能. 自定义Button,需要重写OnEnter()和onExit()函数,并在对应函 ...

  8. Android与Libgdx环境配置

    此处所说的是基于windows和android版本的libgdx环境配置. 1. 下载所需软件 JDK 1.7. 下载地址: window x86版本地址: http://www.oracle.com ...

  9. dubbo见解

    调用关系说明 服务容器负责启动,加载,运行服务提供者. 服务提供者在启动时,向注册中心注册自己提供的服务. 服务消费者在启动时,向注册中心订阅自己所需的服务. 注册中心返回服务提供者地址列表给消费者, ...

  10. 【ORACLE】oracle11g RAC搭建

    --安装好操作系统(rhel-server-6.7 on vmware) 注意事项: 1.磁盘配置lvm 2.账号密码 root/oracle ---------------------------- ...