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/
css雪碧(CSS Sprite)和css3过渡效果综合应用的更多相关文章
- 关于css雪碧图sprite
天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就 ...
- CSS雪碧,即CSS Sprite 简单的例子
CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...
- 使用compass自动合并css雪碧图(css sprite)
本文转载自: 使用compass自动合并css雪碧图(css sprite)
- CSS Sprite、CSS雪碧图应用实例
CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...
- 移动端webapp自适应实践(css雪碧图制作小工具实践)图文并茂
为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例gi ...
- Css雪碧图
Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...
- css中雪碧图(sprite)的使用及制作方法
雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...
- 【前端】CSS雪碧
百度百科:http://baike.baidu.com/link?url=jblMCCF77bq7egbJ-9SudRmvXdwlQVVOq5D9MEEniQgJR-Lqanfrnjzwmgu7ato ...
- css雪碧技术的用法。
---恢复内容开始--- 在目前前端开发阶段,页面会出现大量的小图片,服务器加载的时候比较吃力,怎么用 一种办法把图片都合并到一张图片上呢?这就用到了css雪碧技术. 雪碧技术是雪碧团队开发,也有人叫 ...
随机推荐
- vi 格式配置
echo set cursorline >>.vimrcecho set ic >>.vimrcecho set nu >>.vimrc
- 搭建Hadoop的HA高可用架构(超详细步骤+已验证)
一.集群的规划 Zookeeper集群: 192.168.182.12 (bigdata12)192.168.182.13 (bigdata13)192.168.182.14 (bigdata14) ...
- Codeforces Round #503 Div1+Div2 1019&1020
https://winniechen.cn/?p=188 这个还是直接放链接吧,毕竟内容比较多...
- 20155320《网络对抗》MSF基础应用
20155320<网络对抗>MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode 于exploit,我觉得exploit是利用一些工具和方法,通过 ...
- 20155338 《网络攻防》 Exp7 网络欺诈防范
20155338 <网络攻防> Exp7 网络欺诈防范 基础问题回答 通常在什么场景下容易受到DNS spoof攻击 在一些公共场所,看到有免费的公用WIFI就想连的时候就容易受到 在日常 ...
- MySql+Socket 完成数据库的增查Demo
需求: 利用MySql数据库结合前端技术完成用户的注册(要求不使用Web服务技术),所以 Demo采用Socket技术实现Web通信. 第一部分:数据库创建 数据库采用mysql 5.7.18, 数据 ...
- POJ1807&&1276
DP专题下的背包专题 其实就是PJ的那些东西了 主流的背包有三种:01背包,完全背包和多重背包 其中01背包和完全背包的转移就比较经典了,而多重背包也是在前两者基础上演变一下即可 1837 题意:有一 ...
- java maven项目迁移时缺失jar包 或者 maven jar包缺失时的解决方案
这样弄完,jar包就都下载好了,就不缺失了. 从GitHub上checkout一个项目下来,导入idea后发现加载依赖奇慢无比,所以临时把网络调成FQ的代理,结果会发现idea会停止之前的下载,那怎么 ...
- 工具神器推荐 Vox 和 search everything
工具神器推荐 Vox 和 search everything vox官网: http://www.wox.one/
- Android 模拟输入那点事
因工作原因,需要用到模拟输入这个东东,查阅了一些资料,实现方式有多种,我大概分为两类,命令行类和程序类. 命令行类包括自动化测试组件monkeyrunner,getevent/setevent命令,i ...