css3的卡片折叠效果

今天笔者将带大家利用css3相关特性实现如下Gif图纸张折叠效果，它仅是CSS，不依赖JavaScript。喜欢的小伙伴可以拿去学习一下。

 

在本教程中，我们将学习使用CSS3功能（例如背景渐变和框阴影）创建灵活的（响应式）折叠纸效果，该功能可以为网站的内容区域提供漂亮的背景 

---

代码如下~

    <style>
        *{
            margin: 0;/*外边距*/
            padding: 0;/*内边距*/
        }
        html body{
            background-color: #ff90b3;/*背景颜色.这个你们可以设置成你们喜欢的颜色*/
        }
        .text{
            width:600px;/*大盒子为600px*/
            margin: 250px auto 100px;/*盒子的位置 你们可以设置成喜欢的位置*/
        }
        .text span{
            display: block;
            float: left;/*浮动*/
            width: 100px;
            height: 120px;
            background-color: #fff;
            line-height: 120px;/*行高*/
            text-align: center;/*文字居中*/
            font-famil