-
效果图:
14 京东侧边栏过渡效果.gif
- xxx.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.京东侧边.html</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.subnav{
margin: 100px auto;
width: 200px;
}
.subnav li{
width: 20px;
height: 20px;
margin: 3px 0;
background-color: pink;
position: relative;
/*z-index: 0;*/ /*父盒子默认z-index: 0;所以不用写 因为不想子盒子盖住父盒子所以改叠放次序（z-index）*/
}
.subnav div{
position: absolute;
right: 0;
top: 0;
height: 20px;
width: 0;
background-color: purple;
transition: all 0.6s; /*谁做动画加在谁身上*/
z-index: -1; /*因为不想子盒子盖住父盒子所以改叠放次序（z-index）*/
}
.subnav li:hover div{
width: 100px;
}
</style>
</head>
<body>
<div class="subnav">
<ul>
<li>
<div></div>
</li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
</div>
</body>
</html>
