前端小demo_day04_油墨喷溅效果
写在前面
前端练习的第四天(打怪升级ing)，今天实现了一个油墨喷溅的效果，看到这个效果的第一眼的时候，每天都会有一个新的属性收获，一起来实现以下吧
效果展示
需求来源
前端常用css样式实现，作为练习使用
所用到的组件以及知识储备
mix-blend-mode元素的内容和亲父亲的内容和元素的背景混合/*使元素和父元素采用滤色方式融合*/ mix-blend-mode: screen;
实现思路
初始肯定是要给盒子设置初始化样式,其次就是准备一张背景图片和一张油墨喷溅的黑白图,黑白图的原因是滤色之后,有非常棒的效果,其他原因,我也不晓得,没学过
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day_004_油墨喷溅特效</title>
<style>
*{
width: 0;
height: 0;
}
body{
width: 1350px;
height: 100%;
justify-content: center;
align-content: center;
display: flex;
}
#box{
position: relative;
width: 1000px;
height: 618px;
background: url("bg_image.jpg") no-repeat;
background-size: cover;
}
#box::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("effect1.jpg") no-repeat;
background-size: cover;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
