今天笔者将带大家利用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