欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

纯CSS实现手风琴效果

程序员文章站 2022-05-26 22:29:21
...

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

感谢TheCodePlayer的图片和灵感。

纯CSS实现手风琴效果

纯CSS实现手风琴效果

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