CSS 少 - 页面卷曲
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 少 - 页面卷曲相关的知识,希望对你有一定的参考价值。
/*
* Page Curl
*
* Inspired by the work of matt hamm:
* http://matthamm.com/box-shadow-curl.html
*/
.page-curl () {
position: relative;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
right: 10px;
bottom: 10px;
-webkit-transform: skew(15deg) rotate(5deg);
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(15deg) rotate(5deg);
-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
}
:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
left: 10px;
bottom: 10px;
-webkit-transform: skew(-15deg) rotate(-5deg);
-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-15deg) rotate(-5deg);
-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
}
}
以上是关于CSS 少 - 页面卷曲的主要内容,如果未能解决你的问题,请参考以下文章
Internet Explorer 上的 CSS 错误阴影效果(纸张卷曲)
CSS 创建没有图像的CSS卷曲引号
CATransition 页面从顶部卷曲
实现 iOS Maps 风格的页面卷曲手势交互
如何在 MuPDF 中实现页面卷曲
如何创建页面卷曲效果