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

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. Mapnik初学笔记

    前言:夏天总是感觉想要睡觉,一心想颓废的我却要一周六天都要处于工作状态,但有些事虽然麻烦,但还是要去做,不由得想起火影忍者里面鹿丸这一个角色,有时候真能理解他的心理状态,或许我应该向他学习:善于思考的 ...

  2. odoo之自动生成编号问题

    单独的seq.xml文件 <?xml version="1.0" encoding="utf-8"?><openerp> <dat ...

  3. Go语言安全编码规范-翻译（分享转发）

    Go语言安全编码规范-翻译 本文翻译原文由:blood_zer0.Lingfighting完成 如果翻译的有问题:联系我(Lzero2012).匆忙翻译肯定会有很多错误,欢迎大家一起讨论Go语言安全能 ...

  4. 20155330 《网络攻防》 Exp3 免杀原理与实践

    20155330 <网络攻防> Exp3 免杀原理与实践 基础问题回答 杀软是如何检测出恶意代码的? 基于特征码.先对流行代码特征的提取,然后进行程序的比对,如果也检测到相应的特征码的程序 ...

  5. 【Qt】QLabel之动态阴影边框

    效果如下: 实现思路参考了下面的文章: Qt 之 QPropertyAnimation 该文章是自定义属性alpha,原理类似,代码如下: //在头文件加入 Q_PROPERTY(int iBorde ...

  6. Redis简介与Memcached的比较

    Redis简介 Redis是一个开源的,使用C语言编写,面向“键/值”对类型数据的分布式NoSQL数据库系统,特点是高性能,持久存储,适应高并发的应用场景.Redis纯粹为应用而产生,它是一个高性能的 ...

  7. BugkuCTF 文件上传测试

    前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文章的形式发表,感谢大家一直以来的支持和理 ...

  8. python 游戏(数字推理游戏Bagels)

    1.游戏思路和流程图 实现功能:玩家猜测三位不一样的数字,猜错了有提示,提示分别为(位置错误数字正确),(位置和数字正确),(数字和位置都不正确) 游戏流程图 2. 使用模块和游戏提示 import ...

  9. kaggle 欺诈信用卡预测——Smote+LR

    from:https://zhuanlan.zhihu.com/p/30461746 本项目需解决的问题 本项目通过利用信用卡的历史交易数据,进行机器学习,构建信用卡反欺诈预测模型,提前发现客户信用卡 ...

  10. 11.11 Daily Scrum

      Today's tasks  Tomorrow's tasks 丁辛 餐厅列表事件处理 餐厅列表事件处理             李承晗             实现指定地点搜索 整合已经完成的部 ...