纯CSS实现手风琴效果
2014-02-23 10:32
567 查看
今天来看一个使用hover触发的一个手风琴效果,鼠标hover时改变图像宽度,配合transition实现动画,效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。
感谢TheCodePlayer的图片和灵感。
下面来看看html,我们用ul、li来布局案例,我们需要一个图像盒子和一个图像描述的盒子。
考虑到案例的适用性,比如说以后照片可能会增加,使用LESS改变案例,CSS部分修正如下。
前端开发whqet,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------
感谢TheCodePlayer的图片和灵感。
下面来看看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前端开发技术,分享网页相关资源。
---------------------------------------------------------------
相关文章推荐
- 解决缓存引发的CSS/JS/IMG问题
- CSS3瀑布布局
- html+css----css布局方式
- html+css----background
- CSS3之background-clip
- CSS3之background-clip
- CSS注释
- CSS注释
- CSS3之background-origin
- CSS3之background-origin
- CSS3之box-shadow
- CSS3之box-shadow
- CSS3之Border-radius
- CSS3之Border-radius
- 【表格样式】——HTML制作表格大全
- 重温CSS:Border属性
- 动态加载js,css文件(跨iframe)
- CSS基础
- css布局学习笔记之box-sizing
- css布局学习笔记之box-sizing