纯CSS手风琴效果

主体代码如下：

1 < html >
2         < head >
3                 < meta charset ="utf-8" >
4                 < title >海贼王悬赏令 </ title >
5                 < link rel ="stylesheet" type ="text/css" href ="style.css" >
6         </ head >
7         < body >
8                 < h1 >海贼王悬赏令 </ h1 >
9                 < div id ="onepiece" >
10                         < ul >
11                                 < li >
12                                         < div class ="title" >
13                                                 < a href ="#" >蒙奇·D·路飞（モンキー·D·ルフィ,Monkey·D·Luffy） </ a >
14                                                 < span >恶魔果实：橡胶果实 < br >悬赏：3千万（可可亚西村事件）→1亿（阿拉巴斯坦事件）→3亿（司法岛事件)→4亿（顶上战争后） </ span >
15                                         </ div >
16                                         < a href ="#" >
17                                                 < img src ="images/1.jpg" >
18                                         </ a >
19                                 </ li >
20                                 < li >
21                                         < div class ="title" >
22                                                 < a href ="#" >妮可·罗宾（ニコ·ロビン ，Nico·Robin） </ a >
23                                                 < span >恶魔果实：超人系花花果实 < br >悬赏：7900万贝利（奥哈拉事件）→8000万贝利（司法岛事件） </ span >
24                                         </ div >
25                                         < a href ="#" >
26                                                 < img src ="images/2.jpg" >
27                                         </ a >
28                                 </ li >
29                                 < li >
30                                         < div class ="title" >
31                                                 < a href ="#" >娜美（ナミ，Nami） </ a >
32                                                 < span >< br >悬赏：1600万（司法岛事件） </ span >
33                                         </ div >
34                                         < a href ="#" >
35                                                 < img src ="images/3.jpg" >
36                                         </ a >
37                                 </ li >
38                                 < li >
39                                         < div class ="title" >
40                                                 < a href ="#" >托尼托尼·乔巴（トニートニーチョッパー，Tony Tony Chopper） </ a >
41                                                 < span >恶魔果实：动物系人人果实 < br >悬赏：50贝利（司法岛事件） </ span >
42                                         </ div >
43                                         < a href ="#" >
44                                                 < img src ="images/4.jpg" >
45                                         </ a >
46                                 </ li >
47                                 < li >
48                                         < div class ="title" >
49                                                 < a href ="#" >山治（サンジ，Sanji） </ a >
50                                                 < span >< br >悬赏：7700万（司法岛事件） </ span >
51                                         </ div >
52                                         < a href ="#" >
53                                                 < img src ="images/5.jpg" >
54                                         </ a >
55                                 </ li >
56                                 < li >
57                                         < div class ="title" >
58                                                 < a href ="#" >乌索普（ウソップ，Usopp） </ a >
59                                                 < span >< br >悬赏：3000万（司法岛事件） </ span >
60                                         </ div >
61                                         < a href ="#" >
62                                                 < img src ="images/6.jpg" >
63                                         </ a >
64                                 </ li >
65                                 < li >
66                                         < div class ="title" >
67                                                 < a href ="#" >罗罗诺亚·索隆（Roronoa Zoro） </ a >
68                                                 < span >< br >悬赏：6千万（阿拉巴斯坦事件）→1亿2000万（司法岛事件） </ span >
69                                         </ div >
70                                         < a href ="#" >
71                                                 < img src ="images/7.jpg" >
72                                         </ a >
73                                 </ li >
74                                 < li >
75                                         < div class ="title" >
76                                                 < a href ="#" >布鲁克（ブルック， Brook） </ a >
77                                                 < span >恶魔果实：超人系黄泉果实 < br >悬赏：3300万贝利 </ span >
78                                         </ div >
79                                         < a href ="#" >
80                                                 < img src ="images/8.jpg" >
81                                         </ a >
82                                 </ li >
83                                 < li >
84                                         < div class ="title" >
85                                                 < a href ="#" >弗兰奇（フランキー，Franky） </ a >
86                                                 < span >< br >悬赏：4400万贝利（司法岛事件） </ span >
87                                         </ div >
88                                         < a href ="#" >
89                                                 < img src ="images/9.jpg" >
90                                         </ a >
91                                 </ li >
92                         </ ul >
93
94                 </ div >
95         </ body >

96 </html>

CSS代码如下

利用了transition属性：

1 *{margin: 0;padding: 0}
2 body{
3         background-color: #cca;
4         }
5 ul{list-style: none;}
6 a{text-decoration: none;}
7 img{border: none;}
8 h1{       
9         margin: 25px;       
10         padding-bottom: 0;
11         text-align: center;
12 }
13
14
15 #onepiece{
16         width: 1170px;
17         height:630px;
18         overflow: hidden;  
19         margin: 25px auto;
20         box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
21
22 }
23
24 #onepiece ul{
25        width:3000px;
26 }
27
28 #onepiece li{
29                 display:block;
30                 width: 130px;height: 630px;
31                 position: relative;
32                 float: left;
33                 border-left: 1px solid #aaa;
34                 box-shadow: 0 0 25px 10px rgba(0,0,0,0.4);
35 -moz-transition:all 0.5s;
36                 -webkit-transition:all 0.5s;
37                 transition:all 0.5s;
38                
39 }
40
41 #onepiece li img{
42         display: block;
43         width:850;
44 }
45
46 #onepiece ul:hover li{
47         width: 45px;
48 }
49
50 #onepiece ul li:hover{
51         width:850px;
52 }
53
54
55
56 #onepiece .title{
57         position: absolute;
58         left:0; bottom:0;
59         width:850px;
60         background:rgba(0,0,0,0.5);
61 }
62
63 #onepiece .title a{
64         display: block;
65         color:#fff;
66         font-size: 16px;
67         padding: 5px;
68 }
69
70 #onepiece .title span{
71         display:block;
72         color:#ccc;
73         font-size: 16px;
74         font-style: italic;
75         padding-left: 5px;
76         padding-bottom:10px;

77 }