CSS滑动门效果

本文主要是介绍CSS滑动门效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

类似日常生活中的滑动门，根据a链接不同的文字宽度，自动撑开相应的背景宽度。
HTML代码如下：

<div><ul><li><a href="#"><span>首页</span></a></li><li><a href="#"><span>开放平台</span></a></li><li><a href="#"><span>表情开放平台</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li><li><a href="#"><span>表情开放平台</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li></ul>
</div>

CSS代码如下：

* {margin: 0;padding: 0;
}
body {background: url(images/weixin/Jv3K6jD.jpg) repeat-x;
}
ul {list-style: none;
}
div {width: 1190px;height: 75px;margin: 0 auto;
}
ul {padding-top: 21px;
}
li {float: left;margin: 0 30px;
}
a {color: #fff;line-height: 33px;text-decoration: none;background: url(images/weixin/lTcb_ve.png) no-repeat;display: block;padding-left: 15px;
}
a span {display: block;line-height: 33px;background: url(images/weixin/lTcb_ve.png) right no-repeat;padding-right: 15px;
}
a:hover {background: url(images/weixin/ao.png) no-repeat;
}
a:hover span{background: url(images/weixin/ao.png) right no-repeat;
}

效果图如下：

这篇关于CSS滑动门效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---