【每日一练】19—CSS 实现撕纸的效果

最新推荐文章于 2022-10-22 11:35:51 发布

web前端开发V

最新推荐文章于 2022-10-22 11:35:51 发布

阅读量390

点赞数

文章标签： css html vue js css3

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649129108&idx=3&sn=2ac3294b215cf333721f0f239cb1ea5a&chksm=be58a739892f2e2f811e90cb6fdb90d5c0d8f8f7a760b6cf82d5fb67f0cf71e8d8abf2529c63&scene=126&&sessionid=0

版权

写在前面

今天我们来练习一个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);
}

写在最后

以上就是今天练习的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】19—CSS 实现撕纸的效果

写在前面今天我们来练习一个CSS实现的撕纸效果，这个效果，也会在一些设计网站上经常看到，但是这个用PS可以直接做成一张图片，但是，今天我们用CSS通过两张图片就实现了，这样做的好处，就是当我们替换图片时，不需要再通过PS来更改图片，可以直接替换产品图片即可，这样会方便很多。好了，我们一起来看一下今天练习的项目最终效果：HTML代码：<!doctype html&gt...
复制链接

扫一扫