前端练习的第四天(打怪升级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>本文发布于:2024-01-31 09:27:13，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170666443627524.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
