使用CSS3模拟文本模糊、被擦除和涂抹的效果

Blurred, Invisible Ink, and Redacted text

css3, 文本特效

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <h2>Blurred</h2>
            <p class="blurred">The home of <span>these birds</span> was on the shore of <span>the lake Stymphalis</span>, in <span>Arcadia</span> (after which they were called), where they <span>caused great destruction</span> among men and cattle.</p>
        </div>
        <div class="col-md-4">
            <h2>Invisible Ink</h2>
            <p class="invisible-ink">The home of <span>these birds</span> was on the shore of <span>the lake Stymphalis</span>, in <span>Arcadia</span> (after which they were called), where they <span>caused great destruction</span> among men and cattle.</p>
        </div>
        <div class="col-md-4">
            <h2>Redacted</h2>
            <p class="redacted">The home of <span>these birds</span> was on the shore of <span>the lake Stymphalis</span>, in <span>Arcadia</span> (after which they were called), where they <span>caused great destruction</span> among men and cattle.</p>
        </div>
    </div>
</div>

Blurred, Invisible Ink, and Redacted text

css3, 文本特效

编辑器支持Emmet

快捷键

Blurred, Invisible Ink, and Redacted text

css3, 文本特效

使用CSS3的shape-outside特性实现文本沿特定外形路径环绕效果

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

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