纯css手风琴

以你之姓@ 2024-04-17 20:26 86阅读 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的手风琴*