写在前面
今天我们来练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处,就是当我们替换图片时,不需要再通过PS来更改图片,可以直接替换产品图片即可,这样会方便很多。
好了,我们一起来看一下今天练习的项目最终效果:
HTML代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>【每日一练】19—CSS实现撕纸的效果</title>
</head>
<body>
<section>
<div class="bg"></div>
<div class="paper"></div>
</section>
</body>
</html>
CSS代码:
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section
{
position: relative;
width: 100%;
height: 100vh;
}
.bg
{
position: absolute;
width: 100%;
height: 100vh;
background: url(bg.jpg);
background-size: cover;
background-position: center;
}
.paper
{
position: absolute;
width: 100%;
height: 100vh;
background: url(paper.jpg);
background-size: cover;
background-position: center;
mix-blend-mode: lighten;
filter: brightness(1.1);
}
写在最后
以上就是今天练习的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号