Web培训

热门话题:

一个简单实用的手风琴效果

发布：佚名
来源：网络
时间：2015-11-05 15:43

实现代码：

<!DOCTYPE html>
<head>
<meta charset="gb2312"/>
<title></title>
<style>
*{padding:0;margin:0;}
.img{width:600px;height:320px;background:#000;}
.img1{background:red;}
.img2{background:green;}
.img3{background:blue;}
.img4{background:orange;}
.img5{background:orangered;}
#box{width:805px;height:320px;margin:100px auto;overflow:hidden;
box-shadow:0 0 10px 1px rgba(0,0,0,0.35);}
#box ul li{float:left;list-style:none;width:160px;position:relative;
-webkit-transition:all .7s;-moz-transition:all .7s;-ms-transition:all .7s;
-o-transition:all .7s;border-left:1px solid #ccc;}
.title{color:#fff;font-size:20px;width:600px;background:rgba(0,0,0,0.5);
position:absolute;bottom:0;left:0;height:50px;line-height:50px;}
#box:hover li{width:50px;}
#box li:hover{width:600px;}
.circle{position:absolute;width:100px;height:100px;background:rgba(0,0,0,0.5);
border-radius:100%;margin:0 auto;}
</style>
</head>
<body>
<div id="box">
 <ul>
  <li>
   <a href=""><div class="img1 img"></div></a>
   <div class="title">标题1</div>
  </li>

  <li>
   <a href=""><div class="img2 img"></div></a>
   <div class="title">标题2</div>
  </li>

  <li>
   <a href=""><div class="img3 img"></div></a>
   <div class="title">标题3</div>
  </li>

  <li>
   <a href=""><div class="img4 img"></div></a>
   <div class="title">标题4</div>
  </li>

  <li>
   <a href=""><div class="img5 img"></div></a>
   <div class="title">标题5</div>
  </li>

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

提示：您可以先修改部分代码再运行

1，主要知识点：

css3的transition属性，transition:all .65s;

rgba(0,0,0,0.5);

2,主要掌握计算盒子的总宽度和各个li的宽

800=600+4*50;

ul:hover li{width:50px;}

ul li:hover{width:600px;}

3，其他的效果我们可以自己发挥添加，比如字体，颜色，动画，其他的效果等，主要是把框架写出来