纯CSS手风琴效果
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>
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;
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 }
因刚接触这个时间不久
如有不足的地方还请各位指出，
不胜感激 。
演示链接：
http://white-quality.qiniudn.com/index.html
下载地址 ：
http://pan.baidu.com/s/1pJpyjyF
