昨天浏览网站时，偶然发现了网站上的翘脚纸片效果，之前见过很多次这种纸张两边翘起的效果，今天终于有时间了解以下这种效果的实现方法了。
网页上的效果
通过检查元素后发现，这种效果其实也是通过
box-shadow实现的，不过元素下面有专门用伪类实现的阴影层，然后通过rotate变换即可达到这种效果。阴影层和内容层的关系可以由下图表示。
结构示意图
其中元素
#paper在上层，#paper:before和#paper:after通过z-index调整到下层，然后设置两个伪元素的阴影即可达到上图效果。代码如下：
#paper {
width: 200px;
height: 50px;
background-color: #fff;
margin: auto;
position: relative;
}
#paper:before,
#paper:after {
content: '';
width: 90px;
height: 40px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
position: absolute;
z-index: -1;
}
#paper:before {
transform: rotate(-5deg);
transform-origin: top right;
left: 10px;
}
#paper:after {
transform: rotate(5deg);
transform-origin: top left;
right: 10px;
}
<div id="paper"></div>
以上代码在浏览器中的效果是这样的：
翘脚纸片效果
通过调整阴影层的各项阴影参数，就可以控制显示效果。值得注意的是，调整参数时千万不要让阴影层比内容层还大，不然阴影就露出马脚了哦！
当然还可以加一些小特技，比如给伪元素们加个动画：
#paper:before,
#paper:after {
animation: shadow ease 2s infinite alternate;
}
@keyframes shadow {
from {
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
}
to {
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}
}```
就变成了这样：
还是蛮有趣的(^-^)。