网上冲浪发现这个svg的滤镜蛮有意思的
<body>
<img src="./image/hutao.webp" alt="" />
<div class="prop">
<div class="entity"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" color-interpolation-filters="sRGB" style="display: none">
<filter id="fluted2" primitiveUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feImage
x="0"
y="0"
result="myImage"
crossorigin="anonymous"
href="./image/hutao.webp"
preserveAspectRatio="none"
width="1"
height="1"
/>
<feDisplacementMap scale="0.015" xChannelSelector="R" yChannelSelector="G" in="myImage" in2="SourceGraphic" result="mask" />
</filter>
</svg>
</div>
</body>
核心:通过feDisplacementMap 对两个svg进行滤镜化效果使用两层div对滚动的动画进行优化
<style>
body {
gap: 32px;
justify-content: center;
display: flex;
align-items: center;
background: black;
height: 100vh;
width: 100vw;
min-width: 1000px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 400px;
}
.prop {
width: 576px;
height: 780px;
overflow: hidden;
position: relative;
}
.entity {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 100%;
display: flex;
filter: url(#fluted2);
animation: maskRoll 25s linear infinite;
background-image: url('./demo.svg');
background-size: 40px 110%;
background-repeat: repeat-x;
}
@keyframes maskRoll {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 50%;
}
}
</style>
外部引入的背景svg
<svg version="1.1" width="40" height="685"
xmlns="http://www.w3.org/2000/svg" color-interpolation-filters="sRGB">
<g>
<rect width="40" height="685" fill="black" />
<rect width="40" height="685" fill="url(#red)" style="mix-blend-mode: screen" />
<rect width="40" height="685" fill="url(#green)" style="mix-blend-mode: screen" />
<rect width="40" height="685" fill="url(#yellow)" style="mix-blend-mode: screen" />
</g>
<defs>
<radialGradient id="yellow" cx="0" cy="0" r="1">
<stop stop-color="yellow" />
<stop stop-color="yellow" offset="1" stop-opacity="0" />
</radialGradient>
<radialGradient id="green" cx="1" cy="0" r="1">
<stop stop-color="green" />
<stop stop-color="green" offset="1" stop-opacity="0" />
</radialGradient>
<radialGradient id="red" cx="0" cy="0" r="1">
<stop stop-color="" />
<stop stop-color="red" offset="1" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
使用这个svg对div背景进行填充
效果图:
核心代码 filter: url(#fluted2);需要将滤镜绑定到元素上
.entity {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 100%;
display: flex;
filter: url(#fluted2);
animation: maskRoll 25s linear infinite;
background-image: url('./demo.svg');
background-size: 40px 110%;
background-repeat: repeat-x;
}
那么完美,效果出来了
参考资料:A Deep Dive Into The Wonderful World Of SVG Displacement Filtering — Smashing Magazine