需求:实现鼠标悬浮时,盒子展开效果
知识点:CSS过渡属性transition
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul{
width: 600px;
margin: 50px auto;
height: 400px;
overflow: hidden;
box-sizing: border-box;
}
li{
box-sizing: border-box;
float: left;
width: 100px;
height: 100%;
transition: 0.8s 0.5s;
}
ul:hover li{
width: 100px;
}
ul li:hover {
width: 300px;
}
li:nth-child(1){
background: yellowgreen;
}
li:nth-child(2){
background: skyblue;
}
li:nth-child(3){
background: lightcyan;
}
li:nth-child(4){
background: lightpink;
}
li:nth-child(5){
background: lightsalmon;
}