当前位置：凯发k8官方网 > 前端技术 > css >内容正文

css

纯css手风琴效果 -凯发k8官方网

发布时间：2025/7/25 css 37 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了纯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

总结

以上是凯发k8官方网为你收集整理的纯css手风琴效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。