纯CSS实现手风琴效果

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

感谢TheCodePlayer的图片和灵感。

纯CSS实现手风琴效果_第1张图片

纯CSS实现手风琴效果_第2张图片

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

接下来,我们来看看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,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------

你可能感兴趣的:(纯CSS实现手风琴效果)