使用CSS3实现手风琴风格的图片展览/相册

点击压缩在一起的图片将渐变展开。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2250
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/CSS3ImageAccordion/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/CSS3ImageAccordion/css/style.css" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/CSS3ImageAccordion/js/modernizr.custom.79639.js"></script>

</head>

<h1>Image Accordion <span>with CSS3</span></h1>
            <h2>A css-only image accordion with "click" events.</h2>

<div class="support-note">
                
                
                
                
                <span class="no-csstransitions">CSS transitions are not supported in your browser</span>
                <span class="note-ie">Sorry, only modern browsers.</span>
            </div>

</header>

<figure>
                    <img src="https://tympanus.net/Tutorials/CSS3ImageAccordion/images/1.jpg" alt="image01" />
                    <input type="radio" name="radio-set" checked="checked" />
                    <figcaption><span>True Colors</span>
                    </figcaption>

<figure>
                        <img src="https://tympanus.net/Tutorials/CSS3ImageAccordion/images/2.jpg" alt="image02" />
                        <input type="radio" name="radio-set" />
                        <figcaption><span>Honest Light</span>
                        </figcaption>

<figure>
                            <img src="https://tympanus.net/Tutorials/CSS3ImageAccordion/images/3.jpg" alt="image03" />
                            <input type="radio" name="radio-set" />
                            <figcaption><span>Silent Serenity</span>
                            </figcaption>

<figure>
                                <img src="https://tympanus.net/Tutorials/CSS3ImageAccordion/images/4.jpg" alt="image04" />
                                <input type="radio" name="radio-set" />
                                <figcaption><span>Warm Welcome</span>
                                </figcaption>

<figure>
                                    <img src="https://tympanus.net/Tutorials/CSS3ImageAccordion/images/5.jpg" alt="image05" />
                                    <input type="radio" name="radio-set" />
                                    <figcaption><span>Sensible Magic</span>
                                    </figcaption>

<figure>
                                        <img src="https://tympanus.net/Tutorials/CSS3ImageAccordion/images/6.jpg" alt="image06" />
                                        <input type="radio" name="radio-set" />
                                        <figcaption><span>Lovely Midnight</span>
                                        </figcaption>

<figure>
                                            <img src="https://tympanus.net/Tutorials/CSS3ImageAccordion/images/7.jpg" alt="image07" />
                                            <input type="radio" name="radio-set" />
                                            <figcaption><span>Illuminated Darkness</span>
                                            </figcaption>

<figure>
                                                <img src="https://tympanus.net/Tutorials/CSS3ImageAccordion/images/8.jpg" alt="image08" />
                                                <input id="ia-selector-last" type="radio" name="radio-set" />
                                                <figcaption><span>Happy Child</span>
                                                </figcaption>
                                            </figure>

</figure>

</div>

</section>

</div>
</body>

</html>

点击压缩在一起的图片将渐变展开。

模板，教程

编辑器支持Emmet

快捷键

点击压缩在一起的图片将渐变展开。

模板，教程

使用CSS3 3D变换（transforms）实现的3D画册/相册/作品展览

使用CSS3实现切片风格的图片滑动面板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：