纯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 >

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 } 

 

因刚接触这个时间不久

如有不足的地方还请各位指出，

不胜感激 。

 演示链接：

http://white-quality.qiniudn.com/index.html 

下载地址 ：

http://pan.baidu.com/s/1pJpyjyF 

 

转载于:https://www.cnblogs.com/White-Quality/p/3896950.html