纯CSS实现手风琴效果

野性酷女 2022-08-25 08:36 341阅读 0赞

今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen[在线编辑][Link 1]、[下载收藏][Link 2]。

感谢TheCodePlayer的图片和灵感。

![SouthEast][]

![SouthEast 1][]

下面来看看html，我们用ul、li来布局案例，我们需要一个图像盒子和一个图像描述的盒子。

<div class="accordian">
    	<ul>
    		<li>
    			<div class="image_title">
    				<a href="#">KungFu Panda</a>
    			</div>
    			<a href="#">
    				<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
    			</a>
    		</li>
    		<li>
    			<div class="image_title">
    				<a href="#">Toy Story 2</a>
    			</div>
    			<a href="#">
    				<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
    			</a>
    		</li>
    		<li>
    			<div class="image_title">
    				<a href="#">Wall-E</a>
    			</div>
    			<a href="#">
    				<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
    			</a>
    		</li>
    		<li>
    			<div class="image_title">
    				<a href="#">Up</a>
    			</div>
    			<a href="#">
    				<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
    			</a>
    		</li>
    		<li>
    			<div class="image_title">
    				<a href="#">Cars 2</a>
    			</div>
    			<a href="#">
    				<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
    			</a>
    		</li>
    	</ul>
    </div>

接下来，我们来看看CSS的写法，这里我们用到了normalize.css和prefix free。首先我们来进行布局

/* 让顶盒子居中显示 */
    .accordian{
      width:850px;
      /* 850=(800+2)*5+20*2 */
      margin:100px auto;
    }
    /* 配置li */
    .accordian li{
      list-style:none;
      width:160px;
      height: 320px;
      float:left;
      position:relative;
      overflow:hidden;
      border-left:2px solid rgba(255,255,255,.8);
    }
    /* 配置图像信息盒子 */
    .accordian li .image_title{
      position:absolute;
      width:100%;
      height:50px;
      background-color:rgba(0,0,0,.5);
      text-indent:2em;
      line-height:50px;
      bottom:0px;
      left:0
    }
    /* 改变链接 */
    .accordian a{
      color:#fff;
      text-decoration:none;
    }

然后我们来看关键，设置li的hover前后状态。我们需要改变的是li的宽度，hover之前都是160px，hover之后激活的li宽640px，其余的40px

/* hover之后所有的li宽改为40px */
    .accordian ul:hover li{
      width:40px;
    }
    /* hover之后激活的li宽为640px，注意这两个设置有先后顺序 */
    .accordian ul li:hover{
      width:640px;
    }

同时，我们需要给li增加transition。

.accordian li{
    
     /* 之前的代码省略 */
     /* 新增transition属性 */
      transition:all 2s;
    }

这样我们就完成了整个效果，为了优化效果，我们增加了hover前后的图像滤镜，不幸的是这个效果只有webkit内核认识，为了代码的未来兼容性我们还是增加了标准属性（虽说现在暂时没有用），代码如下。

.accordian ul:hover li{
      width:40px;
      -webkit-filter:grayscale(.8);
      filter:grayscale(.8);
    }
    .accordian ul li:hover{
      width:640px;
      -webkit-filter:grayscale(0) hue-rotate(300deg);
      filter:grayscale(0) hue-rotate(300deg);
    }

好的，整个CSS文件如下。

.accordian{
      width:850px;
      margin:100px auto;
    }
    .accordian li{
      float:left;
      list-style:none;
      width:160px;
      height：320px;
      transition:all 2s;
      position:relative;
      overflow:hidden;
      border-left:2px solid rgba(255,255,255,.8);
      box-shadow:0px 0px 20px rgba(0,0,0,0.8);
    }
    .accordian ul:hover li{
      width:40px;
      -webkit-filter:grayscale(.8);
      filter:grayscale(.8);
    }
    .accordian ul li:hover{
      width:640px;
      -webkit-filter:grayscale(0) hue-rotate(300deg);
      filter:grayscale(0) hue-rotate(300deg);
    }
    .accordian li .image_title{
      position:absolute;
      width:100%;
      height:50px;
      background-color:rgba(0,0,0,.5);
      text-indent:2em;
      line-height:50px;
      bottom:0px;
      left:0
    }
    .accordian a{
      color:#fff;
      text-decoration:none;
    }

考虑到案例的适用性，比如说以后照片可能会增加，使用LESS改变案例，CSS部分修正如下。

//图像个数
    @imageN:5;
    //图像hover之前的总宽度
    @w:800px;
    //图像hover之后的宽度
    @imageL:640px;
    //图像hover之前的宽度
    @imageS:@w/@imageN;
    //边框宽度
    @bdWidth:2px;
    //阴影宽度
    @shadowWidth:20px;
    .accordian{
      width:@w + @bdWidth * @imageN + @shadowWidth*2;
      margin:100px auto;
    
      ul li{
        float:left;
        list-style:none;
        width:@imageS;
        transition:all 2s;
        position:relative;
        overflow:hidden;
        border-left:1px solid rgba(255,255,255,.8);
        border-left-width:@bdWidth;
        box-shadow:0px 0px 20px rgba(0,0,0,0.8);
    
        .image_title{
          position:absolute;
          width:100%;
          height:50px;
          background-color:rgba(0,0,0,.5);
          text-indent:2em;
          line-height:50px;
          bottom:0px;
          left:0
    
          a{
            color:#fff;
            text-decoration:none;
          }
        }
      }
      
      ul:hover li{
        width:@imageS - @imageL/@imageN;
        -webkit-filter:grayscale(.8);
        filter:grayscale(.8);
      }
    
      ul li:hover{
        width:@imageL;
        -webkit-filter:grayscale(0) hue-rotate(300deg);
        filter:grayscale(0) hue-rotate(300deg);
      }
    }

\---------------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/CyzqJ
[Link 2]: http://codepen.io/whqet/share/zip/CyzqJ
[SouthEast]: /images/20220824/05ace318cf204d82ac2a17829bf47677.png
[SouthEast 1]: /images/20220824/667267ba4aa2490f9705ea0e906b1510.png
[whqet]: http://blog.csdn.net/whqet