手风琴效果实现-优快云博客

本文介绍了一种使用HTML和CSS实现的手风琴效果。当鼠标悬停在图片上时，该图片会放大并显示详细信息，而其他图片则缩小。通过简单的CSS技巧，实现了平滑的过渡效果。

功能描述：

鼠标移到每一个图片上，显示当前图片，其余图片变成宽度为原来的6%，同时图片透明度为1，0.5s后显示图片说明。鼠标移除后，每张照片宽度变为16%的宽度。其中图片说明，没有设计样式，有兴趣的可以自己动手。

html代码：

<body>
   <h1>手风琴效果</h1>
    <div id="content">
        <ul>
            <li>
                <a href="#">
                    <h2>图片名称</h2>
                    <p>图片描述</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>图片名称</h2>
                    <p>图片描述</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>图片名称</h2>
                    <p>图片描述</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>图片名称</h2>
                    <p>图片描述</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>图片名称</h2>
                    <p>图片描述</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>图片名称</h2>
                    <p>图片描述</p>
                </a>
            </li>

        </ul>
    </div>
</body>

样式：

<style>
        h1{
            background: #ccc;
            font-family: sans-serif;
            color: #fff;
            text-align: center;
        }
        #content{
            width: 100%;
            max-width: 900px;
            height: 250px;
            overflow: hidden;
            margin: 50px auto;;
        }
        #content ul{
            width: 100%;
            display: table;
            table-layout: fixed;
            margin: 0;
            padding:0;
        }
        /*每个元素以表格单元格方式布局*/
        #content ul li{
            display: table-cell;
            vertical-align: bottom;
            width: 16%;
            height: 250px;
            background-repeat: no-repeat;
            background-position: center center;
            opacity: 0.6;
            transition:all 200ms ease;
            
        }
        #content ul li:nth-child(1){
            background:url("http://img3.imgtn.bdimg.com/it/u=1025520666,4232188538&fm=214&gp=0.jpg")
        }
        #content ul li:nth-child(2){
            background:url("http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1507/01/c0/9172246_1435759929415_800x600.jpg")
        }
         #content ul li:nth-child(3){
            background:url("http://c.hiphotos.baidu.com/zhidao/pic/item/9c16fdfaaf51f3de869cd51592eef01f3a297990.jpg")
        }
        #content ul li:nth-child(4){
            background:url("http://img4q.duitang.com/uploads/item/201506/07/20150607215320_fEMrv.thumb.700_0.jpeg")
        }
         #content ul li:nth-child(5){
            background:url("http://img15.3lian.com/2015/a1/16/d/206.jpg")
        }
        #content ul li:nth-child(6){
            background:url("http://img.yanj.cn/store/goods/2093/2093_75db88665f8edbf6db1bb500c64a5dc9.jpg_max.jpg")
        }
         /*设置说明样式*/
        #content ul li a{
            display: block;
            color: #ffffff;
            position: relative;
            left: 10px;
            text-decoration: none;
            opacity: 0;
            transition:all .5s ease 200ms;
        }
        /*移到li上时宽度变化*/
        #content ul:hover li{
            width: 8%;
        }
        #content ul:hover li:hover{
            width: 60%;
            opacity: 1;
        }
        #content ul:hover li:hover a{
            opacity: 1;
        }


    </style>