HTML5/SVG文本的幽灵漂浮动画特效

Ghost SVG filters, 使用svg feTurbulence滤镜实现的乱流文本特效实例。

svg, filter

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body,
html {
    height: 100vh;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-filter: url("#flyOn");
    filter: url("#flyOn");
    -webkit-animation: wavemover 10s infinite alternate linear;
    animation: wavemover 10s infinite alternate linear;
    font-family: 'Rubik Mono One', sans-serif;
    background: -webkit-linear-gradient(#0d4fa7 0%, #3072cc 60%, #6facff 100%);
    background: linear-gradient(#0d4fa7 0%, #3072cc 60%, #6facff 100%);
}
h1 {
    color: #fff;
    font-size: 4em;
    max-width: 7ch;
    opacity: .6;
}
@-webkit-keyframes wavemover {
    100% {
        padding-left: 300px;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}
@keyframes wavemover {
    100% {
        padding-left: 300px;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

HTML

Ghost SVG filters, 使用svg feTurbulence滤镜实现的乱流文本特效实例。

svg, filter

编辑器支持Emmet

快捷键

Ghost SVG filters, 使用svg feTurbulence滤镜实现的乱流文本特效实例。

svg, filter

HTML5 SVG 被水浸泡的文本特效

HTML5/Canvas/SVG粘稠物特性动画模拟

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：