例子1

图1.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>feTurbulence</title>
    <style>

        body {
            font-family: 'Amatic SC', sans-serif;
            font-size: 100px;
        }

        .test {
            -webkit-animation: squiggly-anim 0.34s linear infinite;
            animation: squiggly-anim 0.34s linear infinite;
        }

        body {
            line-height: 100vh;
            background: #111;
            color: #fff;
        }

        .test {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
            outline: none;
            text-align: center;
            line-height: 1;
        }

        .small {
            font-size: 0.5em;
        }

        .smaller {
            font-size: 0.4em;
        }

        p {
            margin: 0;
        }

        @-webkit-keyframes squiggly-anim {
            0% {
                -webkit-filter: url("#squiggly-0");
                filter: url("#squiggly-0");
            }
            25% {
                -webkit-filter: url("#squiggly-1");
                filter: url("#squiggly-1");
            }
            50% {
                -webkit-filter: url("#squiggly-2");
                filter: url("#squiggly-2");
            }
            75% {
                -webkit-filter: url("#squiggly-3");
                filter: url("#squiggly-3");
            }
            100% {
                -webkit-filter: url("#squiggly-4");
                filter: url("#squiggly-4");
            }
        }

        @keyframes squiggly-anim {
            0% {
                -webkit-filter: url("#squiggly-0");
                filter: url("#squiggly-0");
            }
            25% {
                -webkit-filter: url("#squiggly-1");
                filter: url("#squiggly-1");
            }
            50% {
                -webkit-filter: url("#squiggly-2");
                filter: url("#squiggly-2");
            }
            75% {
                -webkit-filter: url("#squiggly-3");
                filter: url("#squiggly-3");
            }
            100% {
                -webkit-filter: url("#squiggly-4");
                filter: url("#squiggly-4");
            }
        }
    </style>
</head>
<body translate="no">
<div class="test" contenteditable="">
    Squiggly Text
    <p class="small">– with – </p>
    <p>
        SVG Filters
    </p>
    <p class="small">(you can even edit this text)</p>
    <p class="smaller">(only tested on Chrome so far)</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="squiggly-0">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"></feTurbulence>
            <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
        </filter>
        <filter id="squiggly-1">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap>
        </filter>
        <filter id="squiggly-2">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
        </filter>
        <filter id="squiggly-3">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap>
        </filter>
        <filter id="squiggly-4">
            <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
        </filter>
    </defs>
</svg>
</body>
</html>

例子2

图2.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>feTurbulence</title>
    <style>
        body {
        background: #cfcfcf;
    }
    #container,
    #water {
        background-image: url("lake.jpg");
        background-position: center bottom;
    }
    #container {
        position: absolute;
        top: calc(50% - 206px);
        left: calc(50% - 275px);
        height: 412px;
        width: 550px;
        overflow: hidden;
        box-shadow: 0 4px 20px #4f4f4f;
    }
    #container #water {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 66%;
        -webkit-filter: url("#turbulence");
        filter: url("#turbulence");
    }
    </style>
</head>
<body>
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<script src="https://wow.techbrood.com/libs/gsap/TweenMax.min.js"></script>
<div id="container">
    <div id="water"></div>
</div>
<svg xlmns="https://www.w3.org/2000/svg" version="1.1">
    <filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
        <feTurbulence id="feturbulence"  numOctaves="3"  stitchTiles="noStitch" baseFrequency="0.016897500000000037 0.11897500000000037"></feTurbulence>
        <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
    </filter>
</svg>
<script>
    var timeline = new TimelineMax({
        repeat: -1,
        yoyo: true
    }),
    feTurb = document.querySelector('#feturbulence');

timeline.add(
    new TweenMax.to(feTurb, 8, {
        onUpdateParams: [feTurb], //pass the filter element to onUpdate
        onUpdate: function(fe) {
            var bfX = this.progress() * 0.005 + 0.015, //base frequency x
                bfY = this.progress() * 0.05 + 0.1, //base frequency y
                bfStr = bfX.toString() + ' ' + bfY.toString(); //base frequency string
            fe.setAttribute('baseFrequency', bfStr);
        }
    }), 0);
</script>
</body>
</html>