在制作导航栏等网页元素时，常常需要为其设置特殊形状的背景，为了使各种特殊形状的背景能够自适应元素中文本的多少，即实现自由拉伸滑动，就出现了CSS滑动门技术。
微信的导航栏：
滑动门简单使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> a {
display: inline-block; height: 33px; line-height: 33px; background: url(to.png) no-repeat; margin: 100px; padding-left: 15px; color: #fff; } a span {
display: inline-block; height: 33px; /*一定注意 span 需要背景图片 右对齐*/ background: url(to.png) no-repeat right top; padding-right: 15px; } a:hover {
background: url(ao.png); } a:hover span {
background: url(ao.png); } </style>
</head>
<body>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>公司新闻</span>
</a>
</body>
</html>这里有几个注意点：
1、因为整个导航栏都是链接所以 a 要包含 span；
2、a 是设置左侧背景（左门），span 是设置右侧背景（右门）；
3、因为我们是滑动门，要实现左右推拉，跟文字内容多少有关系，所以此处只给盒子设置背景图片的高度，不给宽度，并将 a 转换为行内块，然后为盒子设置左右 padding 避免文字压住边缘。
4、想要在鼠标悬停时改变背景图，只需要在a:hover 中更改背景图即可。
今天的文章CSS的滑动门技术分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/25863.html
