使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字

Squiggly Text Experiment 你可以在线编辑该特效文本，改成你想要的文字。

SVG，CSS3

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("http://fonts.googleapis.com/css?family=Amatic+SC:400,700");
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");
    }
}

HTML

<div class="test" contenteditable>
    Squiggly Text
    <p class="small">– with –
        <p/> SVG Filters
        <p class="small">(you can even edit this text)</p>
        <p class="smaller">(only tested on Chrome so far)</p>
</div>

Squiggly Text Experiment 你可以在线编辑该特效文本，改成你想要的文字。

SVG，CSS3

编辑器支持Emmet

快捷键

Squiggly Text Experiment 你可以在线编辑该特效文本，改成你想要的文字。

SVG，CSS3

SVG+CSS3 水滴/冰雪融化的动画

SVG+CSS3 3D环球旅行动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：