C3实现手风琴效果

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<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">标题11</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>

posted on 2018-03-03 17:59  低调的程序员弟弟  阅读(193)  评论(0)    收藏  举报

导航