图片水波纹滚动效果

二等兵降空投

已于 2024-08-22 14:55:37 修改

阅读量153

点赞数 5

文章标签： java 服务器前端

于 2024-08-22 14:52:23 首次发布

本文链接：https://blog.csdn.net/Huang595959/article/details/141427307

版权

网上冲浪发现这个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

二等兵降空投

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片水波纹滚动效果

核心:通过feDisplacementMap 对两个svg进行滤镜化效果使用两层div对滚动的动画进行优化。核心代码 filter: url(#fluted2);需要将滤镜绑定到元素上。网上冲浪发现这个svg的滤镜蛮有意思的。使用这个svg对div背景进行填充。外部引入的背景svg。那么完美，效果出来了。
复制链接

扫一扫