纯CSS手风琴效果
CSS手风琴效果
主体代码如下：
1<html>2<head>3<metacharset="utf-8">4<title>海贼王悬赏令</title>5<linkrel="stylesheet"type="text/css"href="style.css">6</head>7<body>8<h1>海贼王悬赏令</h1>9<divid="onepiece">10<ul>11<li>12<divclass="title">13<ahref="#">蒙奇·D·路飞（モンキー·D·ルフィ,Monkey·D·Luffy）</a>14<span>恶魔果实：橡胶果实<br>悬赏：3千万（可可亚西村事件）→1亿（阿拉巴斯坦事件）→3亿（司法岛事件)→4亿（顶上战争后）</span>15</div>16<ahref="#">17<imgsrc="images/1.jpg">18</a>19</li>20<li>21<divclass="title">22<ahref="#">妮可·罗宾（ニコ·ロビン，Nico·Robin）</a>23<span>恶魔果实：超人系花花果实<br>悬赏：7900万贝利（奥哈拉事件）→8000万贝利（司法岛事件）</span>24</div>25<ahref="#">26<imgsrc="images/2.jpg">27</a>28</li>29<li>30<divclass="title">31<ahref="#">娜美（ナミ，Nami）</a>32<span><br>悬赏：1600万（司法岛事件）</span>33</div>34<ahref="#">35<imgsrc="images/3.jpg">36</a>37</li>38<li>39<divclass="title">40<ahref="#">托尼托尼·乔巴（トニートニーチョッパー，TonyTonyChopper）</a>41<span>恶魔果实：动物系人人果实<br>悬赏：50贝利（司法岛事件）</span>42</div>43<ahref="#">44<imgsrc="images/4.jpg">45</a>46</li>47<li>48<divclass="title">49<ahref="#">山治（サンジ，Sanji）</a>50<span><br>悬赏：7700万（司法岛事件）</span>51</div>52<ahref="#">53<imgsrc="images/5.jpg">54</a>55</li>56<li>57<divclass="title">58<ahref="#">乌索普（ウソップ，Usopp）</a>59<span><br>悬赏：3000万（司法岛事件）</span>60</div>61<ahref="#">62<imgsrc="images/6.jpg">63</a>64</li>65<li>66<divclass="title">67<ahref="#">罗罗诺亚·索隆（RoronoaZoro）</a>68<span><br>悬赏：6千万（阿拉巴斯坦事件）→1亿2000万（司法岛事件）</span>69</div>70<ahref="#">71<imgsrc="images/7.jpg">72</a>73</li>74<li>75<divclass="title">76<ahref="#">布鲁克（ブルック，*）</a>77<span>恶魔果实：超人系黄泉果实<br>悬赏：3300万贝利</span>78</div>79<ahref="#">80<imgsrc="images/8.jpg">81</a>82</li>83<li>84<divclass="title">85<ahref="#">弗兰奇（フランキー，Franky）</a>86<span><br>悬赏：4400万贝利（司法岛事件）</span>87</div>88<ahref="#">89<imgsrc="images/9.jpg">90</a>91</li>92</ul>9394</div>95</body>96</html>
CSS代码如下
利用了transition属性：
1*{margin:0;padding:0}2body{3background-color:#cca;4}5ul{list-style:none;}6a{text-decoration:none;}7img{border:none;}8h1{9margin:25px;10padding-bottom:0;11text-align:center;12}131415#onepiece{16width:1170px;17height:630px;18overflow:hidden;19margin:25pxauto;20box-shadow:0010px2pxrgba(0,0,0,0.4);2122}2324#onepieceul{25width:3000px;26}2728#onepieceli{29display:block;30width:130px;height:630px;31position:relative;32float:left;33border-left:1pxsolid#aaa;34box-shadow:0025px10pxrgba(0,0,0,0.4);35-moz-transition:all0.5s;36-webkit-transition:all0.5s;37transition:all0.5s;3839}4041#onepieceliimg{42display:block;43width:850;44}4546#onepieceul:hoverli{47width:45px;48}4950#onepieceulli:hover{51width:850px;52}53545556#onepiece.title{57position:absolute;58left:0;bottom:0;59width:850px;60background:rgba(0,0,0,0.5);61}6263#onepiece.titlea{64display:block;65color:#fff;66font-size:16px;67padding:5px;68}6970#onepiece.titlespan{71display:block;72color:#ccc;73font-size:16px;74font-style:italic;75padding-left:5px;76padding-bottom:10px;77}
因刚接触这个时间不久
如有不足的地方还请各位指出，
不胜感激 。
演示链接：
http://white-quality.qiniudn.com/index.html
下载地址 ：
http://pan.baidu.com/s/1pJpyjyF