CSS3实现图片平滑手风琴图片展示特效

CSS3实现图片平滑手风琴图片展示特效

一款酷炫的手风琴风格式的展示图片风格,全部基于css3实现。直接打开html页面,标签使用简单的ul li结构,其动画样式实现的效果基于css3实现,简单易懂。

CSS文件
页面需要用到的CSS文件accordion.css。

1
<link rel="stylesheet" type="text/css"  href="css/accordion.css"/>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<div class="wrapper">
    <ul>
        <li>
            <div class="content">
                <dl>
                    <dt><img src="images/a1.png" /></dt>
                    <dd>Picture 1</dd>
                </dl>
                <dl>
                    <dt><img src="images/a1.png" /></dt>
                    <dd>Picture 11</dd>
                </dl>
                <dl>
                    <dt><img src="images/a1.png" /></dt>
                    <dd>Picture 12</dd>
                </dl>
                <dl>
                    <dt><img src="images/a1.png" /></dt>
                    <dd>Picture 13</dd>
                </dl>
            </div>
            <p class="p1">Picture information 1</p>
            <p class="p2">Picture information 1</p>
        </li>
        <li>
            <div class="content">
                <dl>
                    <dt><img src="images/a2.png" /></dt>
                    <dd>Picture 2</dd>
                </dl>
                <dl>
                    <dt><img src="images/a2.png" /></dt>
                    <dd>Picture 21</dd>
                </dl>
                <dl>
                    <dt><img src="images/a2.png" /></dt>
                    <dd>Picture 22</dd>
                </dl>
                <dl>
                    <dt><img src="images/a2.png" /></dt>
                    <dd>Picture 23</dd>
                </dl>
            </div>
            <p class="p1">Picture information 2</p>
            <p class="p2">Picture information 2</p>
        </li>
        <li>
            <div class="content">
                <dl>
                    <dt><img src="images/a3.png" /></dt>
                    <dd>Picture 3</dd>
                </dl>
                <dl>
                    <dt><img src="images/a3.png" /></dt>
                    <dd>Picture 31</dd>
                </dl>
                <dl>
                    <dt><img src="images/a3.png" /></dt>
                    <dd>Picture 32</dd>
                </dl>
                <dl>
                    <dt><img src="images/a3.png" /></dt>
                    <dd>Picture 33</dd>
                </dl>
            </div>
            <p class="p1">Picture information 3</p>
            <p class="p2">Picture information 3</p>
        </li>
        <li>
            <div class="content">
                <dl>
                    <dt><img src="images/a4.png" /></dt>
                    <dd>Picture 4</dd>
                </dl>
                <dl>
                    <dt><img src="images/a4.png" /></dt>
                    <dd>Picture 41</dd>
                </dl>
                <dl>
                    <dt><img src="images/a4.png" /></dt>
                    <dd>Picture 42</dd>
                </dl>
                <dl>
                    <dt><img src="images/a4.png" /></dt>
                    <dd>Picture 43</dd>
                </dl>
            </div>
            <p class="p1">Picture information 4</p>
            <p class="p2">Picture information 4</p>
        </li>
        <li>
            <div class="content">
                <dl>
                    <dt><img src="images/a5.png" /></dt>
                    <dd>Picture 5</dd>
                </dl>
                <dl>
                    <dt><img src="images/a5.png" /></dt>
                    <dd>Picture 51</dd>
                </dl>
                <dl>
                    <dt><img src="images/a5.png" /></dt>
                    <dd>Picture 52</dd>
                </dl>
                <dl>
                    <dt><img src="images/a5.png" /></dt>
                    <dd>Picture 53</dd>
                </dl>
            </div>
            <p class="p1">Picture information 5</p>
            <p class="p2">Picture information 5</p>
        </li>
        <li>
            <div class="content">
                <dl>
                    <dt><img src="images/a6.png" /></dt>
                    <dd>Picture 6</dd>
                </dl>
                <dl>
                    <dt><img src="images/a6.png" /></dt>
                    <dd>Picture 61</dd>
                </dl>
                <dl>
                    <dt><img src="images/a6.png" /></dt>
                    <dd>Picture 62</dd>
                </dl>
                <dl>
                    <dt><img src="images/a6.png" /></dt>
                    <dd>Picture 63</dd>
                </dl>
            </div>
            <p class="p1">Picture information 6</p>
            <p class="p2">Picture information 6</p>
        </li>
    </ul>
</div>

文件信息:

    2

    发表评论