CSS实现的撕纸效果

练习一个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);
}

写在最后

以上就是练习的全部内容，希望这个小练习对你有用

CSS实现的撕纸效果相关推荐

JS模仿腾讯微博app撕纸效果
本来想用css3来实现,但后来脑袋一热就用了js,省的别人你ie怎么没效果啊!在腾讯微博app上看到的一个效果,鼠标击哪里就撕了哪里,跟撕报纸似的,任意点击左边面的灰色区域,查看效果,当时觉得很有意思 ...
html实现纸张撕边效果,PS图片处理教程：PS撕边效果，脸部撕纸效果
在前面小编给大家讲解了许多关于PS的教程,相信大家已经学到了很多知识吧,今天小编接着给大家带来PS图片处理教程:PS撕边效果,脸部撕纸效果.如何让脸部利用PS处理产生想撕纸一样的效果.下面小编就详细给 ...
快速蒙版应用——撕纸效果
快速蒙版应用--撕纸效果原图: 效果图: 步骤: 1.打开素材原图,双击该图层,变为普通图层"图层0",选择"图像"-"画布大小",将&q ...
PS技巧---撕纸效果
素材均来自网上!不存在任何抄袭现象! 首先,先找一张图片!然后,在中间画一条线!然后给一边填充黑色! 复制图片图层,然后去色,将去色图层调整到黑色这里! 这时候,我们想要加一点酷炫风! 对于第一个图层 ...
【每日一练】19—CSS 实现撕纸的效果
写在前面今天我们来练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处,就是当我们替换图 ...
html怎么设置左上角标注,利用HTML+CSS制作左上角卷角效果的网页的方法
利用HTML+CSS制作左上角卷角效果的网页的方法 2020-02-13 19:02:00 195 英文原文 http://designshack.net/articles/css/code-a-si ...
css图片位置改变过度效果_CSS位置：绝对的，过度使用的
css图片位置改变过度效果 Developers who know just enough CSS to get them into trouble, along with obsessive, pi ...
使用css实现瀑布流的效果
使用css实现瀑布流的效果主要是通过display:flex弹性布局的方式. 注意要设置列数图片的宽度要一致,否则图片显示会有问题 <!DOCTYPE html> <html la ...
地图旋转_折纸效果三维旋转，不一样的地图页设计
我们在制作PPT或网页的过程中,有时候会用到地图来标记地点信息. 比如这样 ▲图片来自腾讯云官网或者是这样 ▲图片来自全球敏捷运维峰会官网今天就来给大家介绍一种地图页面的新玩法:三维折纸地图. 听 ...

CSS实现的撕纸效果

CSS实现的撕纸效果相关推荐

最新文章

热门文章