【每日一练】19—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);
}

写在最后

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

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

学习更多技能

请点击下方公众号

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

Python每日一练19、简单的加减法数学游戏
简单的加减法数学游戏需求随机生成两个100以内的数字随机选择加法或是减法总是使用大的数字减去小的数字让用户输入答案,直到输入正确为止 import random nums = [random ...
Photoshop文字之——打造撕纸文字效果
来源: 硅谷动力先看一下效果: 制作工具:Photoshop CS 制作过程: 1.新建一个文件,设置宽度为10厘米,高度为5厘米,分辨率为300像素,模式为RGB的白色文件. 2.打开通道面板,在 ...
CSS实现的撕纸效果
练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处,就是当我们替换图片时,不需要再通过P ...
【每日一练】100—一个渐变色计数器列表的实现
文 | 杨小爱写在前面今天我们迎来了[每日一练]栏目的第100个练习,在这几个月的持续练习中,我不知道,你学到了什么?是持续学习的习惯,还是前端基础知识? 但是,不管怎么样,只要持续的去做去学习自 ...
【每日一练】39—七夕节背景轮播图效果的实现
作者 | 杨小爱写在前面今天是七夕节,在这里,我先祝大家七夕节快乐,有情人终成眷属.我们节也要过,学习也要继续,因此,今天我们来实现一个漂亮的七夕幻灯轮播图效果,这个效果我个人觉得非常实用,如果你 ...
QT每日一练day1：第一个程序
参考博文:Qt常见类.窗口类继承关系树图 QT每日一练(1):第一个程序最终效果(GIF动图): step1: step2: step3: step4: step5: step6: step7: s ...
【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
【每日一练】56—CSS实现一款实用的响应式卡片悬停效果
写在前面今天这个练习,是目前很多网站上非常常见的一个效果,主要是这个效果干净简洁,它没有任何多余的内容,看起来也很舒服. 具体效果,请看下面的gif动画: 因为是GIF录屏,背景的渐变色有点色块,衔 ...

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

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

最新文章

热门文章