css雪碧（CSS Sprite）和css3過渡效果綜合應用

時間 2019-11-17

標籤 css 雪碧 sprite css3 過渡效果綜合應用欄目 CSS 简体版

原文原文鏈接

在網頁中咱們常常能夠看到，有些圖片在鼠標通過的時候，有一個上下或左右的滑動效果，很實用頁很方便，今天正好用到，拿來和你們分享一下，有什麼不對或意見歡迎指正。javascript

html部分以下，這裏原本打算用jq來着，後來沒有用到。。css

話很少說直接上代碼。。html

<!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="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>java

css部分jquery

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}css3

配合上你想要展現的圖片，和背景定位，一個實用美觀的效果就寫好了。web

附上連接 http://xf.wolade.com/demo2/demo2/ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。