css滑动门技术小实例

最新推荐文章于 2021-08-03 20:15:31 发布

牧屿秭归

最新推荐文章于 2021-08-03 20:15:31 发布

阅读量270

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Zero_ying/article/details/95373175

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

通过css sprites(图片整合)中的滑动门技术实行鼠标点击时背景能够发生改变，效果如图（PS：因为找不到素材就自己用qq表情拼接的，我自己也知道不太好看）：

图片按顺序分别是鼠标没有点击；鼠标点击首页；鼠标点击新闻；鼠标点击娱乐；鼠标点击体育以及页面用到的原始背景图片。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css精灵</title>
<style type="text/css">
*{margin:0; padding:0;}
ul li {list-style:none;}
.nav {width:194px; height:31px; margin:50px auto;;}
.nav  li a {float:left;}
.nav li a {display:block; width:47.5px; height:31px; color:#333; border-right: 1px #eee solid; text-align:center; line-height:31px; text-decoration:none; background:url(images/css%E7%B2%BE%E7%81%B5.png);}
#p2 a { background-position:-48.5px 0;}
#p3 a { background-position:-97px 0;}
#p4 a { background-position:-145.5px 0;}
#p1 a:hover { background-position:0 -31px;}
#p2 a:hover { background-position:-48.5px -31px;}
#p3 a:hover { background-position:-92px -31px;}
#p4 a:hover { background-position:-138px -31px;}
</style>
</head>

<body>
<ul class="nav">
<li id="p1"><a href="#">首页</a></li>
<li id="p2"><a href="#">新闻</a></li>
<li id="p3"><a href="#">娱乐</a></li>
<li id="p4"><a href="#">体育</a></li>
</ul>
</body>
</html>

p2、p3、p4需要将背景图片进行移动才能达到预期效果，而p1不用。这是因为p2、p3、p4的背景图片都默认从图片的最左上角开始。