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