CSS3实现折纸效果

最新推荐文章于 2022-09-20 14:25:13 发布

tianshizhimeng155

最新推荐文章于 2022-09-20 14:25:13 发布

阅读量2.2k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/u013267266/article/details/51314931

版权

本文介绍如何利用CSS3实现独特的折纸效果，通过在DIV中嵌套DIV来确保无缝连接，借助box-shadow创建向下运动的渐变，同时讨论了防止按钮重复点击以保持效果稳定的方法。

摘要由CSDN通过智能技术生成

1.折纸布局很特别：

DIV里套DIV，主要为了在实现折叠时，能够连接起来，中间不会开出一条缝，一种很巧妙的方式

<div id="wrap">
	<h2>我是标题奥</h2>
    <div>
    	<span>选项1</span>
        <div>
        	<span>选项2</span>
            <div>
            	<span>选项3</span>
                <div>
                	<span>选项4</span>
                    <div>
                    	<span>选项5</span>
                        <div>
                        	<span>选项6</span>
                            <div style="">
                            	<span>选项7</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>