美文网首页
利用纯CSS实现多层堆叠纸片的效果

利用纯CSS实现多层堆叠纸片的效果

作者: 竹杖芒鞋轻胜码 | 来源:发表于2017-06-19 12:22 被阅读0次

效果如下:

纸片效果.png

实现思路:

设置元素 css 的 多个box-shadow属性来生成

这是Demo的主要DOM结构:

DOM结构图.png

注意要给<footer>添加伪元素::before

以下是CSS代码:

.todoapp {
    background: #fff;
    margin: 130px 0 40px 0;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.footer {
    color: #777;
    padding: 10px 15px;
    height: 20px;
    text-align: center;
    border-top: 1px solid #e6e6e6;
}

/*重点在于box-shadow中是
以一种夹层 '阴影'-'纯色'-'阴影'-'纯色'-'阴影'  的结构*/
.footer:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
                0 8px 0 -3px #f6f6f6, 
                0 9px 1px -3px rgba(0, 0, 0, 0.2),
                0 16px 0 -6px #f6f6f6, 
                0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

over.

相关文章

网友评论

      本文标题:利用纯CSS实现多层堆叠纸片的效果

      本文链接:https://www.haomeiwen.com/subject/fdygqxtx.html