纯css手风琴

最新推荐文章于 2024-09-04 07:11:11 发布

裴嘉靖

最新推荐文章于 2024-09-04 07:11:11 发布

阅读量101

点赞数

分类专栏： CSS 日报 HTML

本文链接：https://blog.csdn.net/peijiajing/article/details/100173255

版权

日报同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

漂亮手风琴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.accordian{
  width:850px;
  margin:100px auto;
}
.accordian li{
  float:left;
  list-style:none;
  width:160px;
  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;
}

		</style>
	</head>
	<body>
		<div class="accordian">
    <ul>
        <li>
            <div class="image_title">
                KungFu Panda
            </div>
               <img src="../H5C3/img/11.jpg" style="width: 630px; height: 315px; ">
              
             
        </li>
        <li>
            <div class="image_title">
                Toy Story 2
            </div>
              <img src="../H5C3/img/01.jpg" style="width: 630px; height: 315px; ">
           
        </li>
        <li>
            <div class="image_title">
                Wall-E
            </div>
             <img src="../H5C3/img/3.png" style="width: 630px; height: 315px; ">
              
             
        </li>
        <li>
            <div class="image_title">
                Up
            </div>
              <img src="../H5C3/img/2.jpg" style="width: 630px; height: 315px; ">
                
        </li>
        <li>
            <div class="image_title">
                Cars 2
            </div>
             
               <img src="../bootstrap/img/logo.jpg" style="width: 630px; height: 315px; ">
             
        </li>
    </ul>
</div>

	</body>
</html>

以上是纯css的手风琴