网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一个CSS的折叠纸效果,可以用来创建折叠海报和宣传单页面。
使用方法:
1.创建折叠纸html代码:
<div class="poster">
<img src="https://source.unsplash.com/laobUPA4jR8/744x1116" alt="Alt" />
</div>
2.创建折叠纸效果css代码。
.poster {
width: 300px;
padding: 7%;
position: relative;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0 3px 12px rgba(0,0,0,0.2);
-webkit-filter: saturate(70%) contrast(85%);
filter: saturate(70%) contrast(85%);
}
.poster img {
width: 100%;
display: block;
z-index: 1;
}
.poster:before,
.poster:after {
content: '';
width: 100%;
left: 0;
position: absolute;
}
.poster:before {
height: 4%;
bottom: -4%;
background-repeat: no-repeat;
background-image: linear-gradient(177deg, rgba(0,0,0,0.22) 10%, transparent 50%), linear-gradient(-177deg, rgba(0,0,0,0.22) 10%, transparent 50%);
background-size: 49% 100%;
background-position: 2% 0, 98% 0;
}
.poster:after {
height: 100%;
top: 0;
z-index: 2;
background-repeat: no-repeat;
background-image: linear-gradient(to right, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(-5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(-265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(-5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(266deg, rgba(0,0,0,0.2), transparent 10%);
background-size: 50% 100%, 100% 33.3333%, 100% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%;
background-position: right top, left center, left bottom, left top, left top, right top, left center, right center, right center, left bottom;
}
转载请注明来源:纯CSS图片3D折叠纸效果代码
本文永久链接地址:https://www.moyouyouw.cn/code/734.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论