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

当前位置:主页 > CSS3库 > CSS3动画 > html5和css3图片手风琴动画效果
html5和css3图片手风琴动画效果
分享:

    插件介绍

    这是一款使用html5和纯css3制作的图片手风琴动画效果。该手风琴效果的所有动画都使用css3完成。动画过渡平滑,手风琴切换时带有弹性,效果相当不错。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-26
    阅读:

简要教程

这是一款效果华丽的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代码请参考下载文件。