如何使用css使一张图片上拥有折叠效果呢?


摘要:
下文讲述使用css代码对图片实现折叠效果的示例分享,如下所示:

实现思路:
    使用css - linear-gradient属性为报纸设置线性渐变,
   模拟出报纸的折痕效果,如下例所示:

例:

<meta charset ='utf-8' />
<style>

.baoZhiXiaoGuo {
    width: 300px;
    padding: 7%;
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    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%);
}
.baoZhiXiaoGuo img {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
}
.baoZhiXiaoGuo:before {
    content: '';
    width: 100%;
    height: 4%;
    left: 0;
    bottom: -4%;
    position: absolute;
    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;
}
.baoZhiXiaoGuo:after {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    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;
}
 
.container {
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-box-align: center;
    align-items: center;
    justify-items: center;
    gap: 60px 30px;
    margin: 0 auto;
}
.container > img {
    width: 250px;
}

</style>
<p>
maomao365.com <br />
模拟图片的报纸折痕效果的示例分享
</p>
<hr />

<div class="container">

    <img src="http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png" alt="猫猫教程--测试图片" />

    <div class="baoZhiXiaoGuo">
        <img src="http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png" alt="猫猫教程--测试图片" />
    </div>

</div>
css模拟图片的报纸折痕效果

css模拟图片的报纸折痕效果