CSS滑动门

最新推荐文章于 2021-08-03 19:03:14 发布

ikun不解释

最新推荐文章于 2021-08-03 19:03:14 发布

阅读量172

点赞数

文章标签：滑动门前端开发

本文链接：https://blog.csdn.net/qq_42309685/article/details/88382644

版权

CSS中的滑动门

今天学习了滑动门，并意外找到了一个怎么在不使用js的情况下滑动切换不同背景图片的方法。
先来看看效果吧！
原来的自适应的效果：
这是文本自适应的效果
滑动一次的效果：
在这里插入图片描述
CSS部分

body,ul{
	margin: 0px;
	padding: 0px;
}
ul{
	list-style:none;
}
a{
	display:inline-block;
	float:left;
	height:35px;
	padding-left:5px;
	line-height:35px;
	text-decoration:none;
	background:url(bg_r1_c1.png) left;
	color:#fff;
}
a:hover{
	background:url(blue_r1_c1.png) left;
}
span{
	display:inline-block;
	height:35px;
	background:url(bg_r1_c2.png) right;
	padding-right:20px;
}
span:hover{
	background:url(blue_r1_c2.png) right;
}

可以看出来每一个li都是由两个背景图片组成的，把span标签嵌入在a标签里面可以使得当滑过a标签时,span的背景图片也会更改，从而不同增加额外的js代码，当然这是一个小白的方法，肯定有一些bug。哈哈哈·······嗝！