手风琴效果CSS3实现手风琴效果 .item:nth-child(1){width:40%;background-col

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #box
        {
            width:300px;
            height:50px;
            overflow:hidden;
        }
        /*定义item公共样式*/
        .item
        {
            float:left;
            width:20%;
            height:100%;
            transition:all 0.5s;
        }
        /*定义item单独样式*/
        .item:nth-child(1) {width:40%;background-color: red;}
        .item:nth-child(2) {background-color: orange;}
        .item:nth-child(3) {background-color: yellow;}
        .item:nth-child(4) {background-color: green;}
        /*关键代码*/
        #box:hover div
        {
            width:20%;
        }
        #box div:hover
        {
            width:40%;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>