纯css的tab栏切换代码

html

<div class="tou">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <span class="d2">
			<div style="background:orange;">1</div>
			<div style="background:yellow;left:100%;">2</div>
			<div style="background:red;left:200%;">3</div>
			<div style="background:green;left:300%;">4</div>
			<div style="background:black;left:400%;">5</div>
		</span>
</div>

* {
	text-align:center;
}
.tou {
	width:600px;
	margin:0 auto;
	overflow:hidden;
}
.tou>div {
	width:18%;
	height:60px;
	background:red;
	display:inline-block;
	vertical-align:top;
}
.tou>span {
	display:block;
	width:100%;
	height:600px;
	position:relative;
}
.tou>span>div {
	width:100%;
	height:100%;
	position:absolute;
}
.d2 {
	transition:.5s;
}
.tou>div:hover {
	background-color:yellow;
}
.tou>div:nth-of-type(2):hover ~ .d2 {
	transform:translateX(-100%);
}
.tou>div:nth-of-type(3):hover ~ .d2 {
	transform:translateX(-200%);
}
.tou>div:nth-of-type(4):hover ~ .d2 {
	transform:translateX(-300%);
}
.tou>div:nth-of-type(5):hover ~ .d2 {
	transform:translateX(-400%);
}

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8300.html