Accordian Slider in CSS3

最新推荐文章于 2024-07-17 13:18:56 发布

转载最新推荐文章于 2024-07-17 13:18:56 发布 · 527 阅读

webkit 同时被 2 个专栏收录

132 篇文章

订阅专栏

javascript

93 篇文章

订阅专栏

本文介绍了一个使用纯CSS3实现的手风琴滑块效果，通过简单的HTML结构和CSS样式实现了图片标题显示隐藏及鼠标悬停时的动画过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.css3.com/accordian-slider-in-css3/

<body>
  <div class="accordian">
    <ul>
      <li>
	<div class="image_title">
	  <a href="#">kunfu panda</a>
	</div>
	<a herf="#">
	  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
	</a>
      </li>

      <li>
      	<div class="image_title">
      	  <a href="#">toy story 2</a>
      	</div>
      	<a herf="#">
      	  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
      	</a>
      </li>
      <li>
      	<div class="image_title">
      	  <a href="#">wall-e</a>
      	</div>
      	<a herf="#">
      	  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
      	</a>
      </li>
      <li>
      	<div class="image_title">
      	  <a href="#">up</a>
      	</div>
      	<a herf="#">
      	  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
      	</a>
      </li>
      <li>
      	<div class="image_title">
      	  <a href="#">cars 2</a>
      	</div>
      	<a herf="#">
      	  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
      	</a>
      </li>
    </ul>
  </div>
</body>

.accordian {
    width: 805px; height: 320px;
    overflow: hidden;
}

ul {
    list-style: none; 
    margin: 0; padding: 0; 
}

ul li {
    float: left;
    width: 160px;
    position: relative;
    -webkit-transition: all 0.5s;
}

.accordian ul:hover li { width: 40px; }
.accordian ul li:hover { width: 640px; }

.image_title {
    position: absolute;
    left: 0; bottom: 0;
    width: 640px;
    background: rgba(0,0,0,0.5);
}

.image_title a {
    display: block;
    color: #fff;
    padding: 20px;
}