html5和css3图片手风琴动画效果

这是一款效果华丽的html5和纯css3图片手风琴效果。该手风琴效果使用radio按钮和兄弟选择器来控制手风琴的动画。

插件中精美的卡片插图来自于花瓣-发现、采集你喜欢的一切。

HTML

html结构采用一个嵌套结构，这个结构允许我们同时移动多个slide（移动其中一个时，其它的slide会一起移动）。每一个figures都包含一张图片、一个radio按钮和一个标题。

<div class="ia-container">      
    <figure>
        <img src="images/1.jpg" alt="image01" />
        <input type="radio" name="radio-set" checked="checked" />
        <figcaption><span>True Colors</span></figcaption>
        
        <figure>
            <img src="images/2.jpg" alt="image02" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Honest Light</span></figcaption>
            <figure>
                <!-- ... -->
                <figure>
                    <!-- ... -->
                    <figure>
                        <!-- ... -->
                        <figure>
                            <!-- ... -->
                            <figure>
                                <!-- ... -->                                      
                                <figure>
                                    <!-- ... -->
                                </figure>  
                            </figure>                
                        </figure>                            
                    </figure>                        
                </figure>                    
            </figure>           
        </figure>    
    </figure> 
</div>
                

CSS代码请参考下载文件。