17-[案例2]B站电影展开效果

需求：实现鼠标悬浮时，盒子展开效果

知识点：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;
}