纯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
總結
- 上一篇： 机房管理系统——vb与excel链接2
- 下一篇： ubuntu查看端口占用