gsap和svg filter实现乱流（turbulence）加载动画

文本乱流效果 + 文字渐进显示加载。

h5, svg, 文本效果, loader

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3487
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let svg = document.getElementById("svg");
let svgTextTwo = document.getElementById("svgTextTwo");
let svgRect = document.getElementById("svgRect");

let turbulence = svg.querySelectorAll("#filter feTurbulence")[0];
let displacement = svg.querySelectorAll("#filter feDisplacementMap")[0];

document.addEventListener("click", function() {
    tl.restart();
})

var tl = new TimelineMax();

animate();

编译

CSS

HTML

</filter>

<defs>
            <clipPath id="clipping">
                <text x="0" transform="translate(100)" id="svgTextOne" transform="matrix(1,0,0,1,0,0) " font-weight="bold" text-anchor="start" font-family="Arvo, sans-serif" font-size="100" class="svgText" y="100" fill="none">LOADING</text>
            </clipPath>
        </defs>

<g filter="url(#filter)">
            <text x="0" transform="translate(100)" id="svgTextTwo" transform="matrix(1,0,0,1,0,0) " font-weight="bold" text-anchor="start" font-family="Arvo, sans-serif" font-size="100" class="svgText" y="100" fill="none" stroke="#e89eb8" stroke-width="2">LOADING</text>

</div>

文本乱流效果 + 文字渐进显示加载。

h5, svg, 文本效果, loader

编辑器支持Emmet

快捷键

文本乱流效果 + 文字渐进显示加载。

h5, svg, 文本效果, loader

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

使用SVG feTurbulence, feColorMatrix, feDisplacementMap特性实现文本火焰填充特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：