一步步教你用 CSS 为 SVG 添加滤镜

翻译：疯狂的技术宅
原文： https://www.creativebloq.com/...

---

本文首发微信公众号：jingchengyideng
欢迎关注，天天都给你推送新鲜的前端技术文章

---

自21世纪初以来，SVG就存在了，但仍有一些有趣的方法去用它。在本教程中，重点将放在 SVG 的滤镜上 —— 但不仅是将它们应用于 SVG 图像，我将向你展现如何将它们应用于任何常规页面的内容上。

实际上咱们是经过告诉 CSS 滤镜所拥有的 ID，而后再把滤镜应用于 SVG 的方式来实现。使用一样的方法，滤镜也能够用于常规文本。关于这一点的好处在于，你能够轻松的为文本添加一些出彩的特效，之前只能经过使用 Photoshop 滤镜并保存为图像来实现。使用SVG滤镜，文本仍然是可访问并可选的，由于它只是页面上的常规文本元素。

这里的代码将为文本建立一个置换贴图，这个贴图还包含一个 alpha 贴图，使其看起来像水同样，并符合咱们页面的主题。而后建立另外一个滤镜，使菜单显示为水斑点，它们会稍微粘在一块儿，但会随着它们向远处移动而分开。这也是为了和特定页面的主题保持一致，并展现了将 SVG 滤镜用于其余内容的两种创造性方法。

• 从FileSilo下载本教程的源码

01. 开始

首先，你须要从上面的连接下载项目文件。以后将项目文件夹 start 拖到代码 IDE 上，而后打开 index.html 页面。你将会看到一些已经写好的页面内容。接下来建立标题部分，这里将包含受 SVG 滤镜影响的标题。在 body 标签内添加代码。

<div class="bg">
        <div class="middle">
            <h2 class="headline">Underwater 
            Adventure Park</h2>
            <div class="intro_block">

02. 完成标题

如今标题已完成，全部文本都已就绪。若是你此刻在浏览器中查看页面，将看到一个带有一些文本的图像。当前标题仍然是没有样式的，接下来为它设置样式并应用 SVG 滤镜。

<h3 class="subhead">Experience the Ocean 
<br>Like Never Before</h3>
                <p class="intro">Underwater 
                Adventure Park is an experience 
                unlinke anything you have ever 
                had. Travel to the depths of 
                the Ocean and walk among the 
                Sea Life!</p>
            </div>
        </div>
    </div>

03. 建立一个 SVG 滤镜

SVG 代码能够添加到页面的任何位置，可是由于它不会被用户直接看到，因此最好将它放在闭合 body 标签以前的最底部。 SVG 滤镜产生一些波纹效果。请注意，滤镜具备 ID —— 这使 CSS 可以把它应用到页面上的另外一个元素。

<svg xmlns="http://www.w3.org/2000/svg">
        <filter id="displacementFilter">
            <feTurbulence type="turbulence" 
            baseFrequency="0.004" numOctaves=
            "2" result="turbulence" />
        </filter>
</svg>

04. 隐藏 SVG

如今转到 page.css 文件，咱们的新 CSS 会添加到全部其它CSS代码的顶部。这里的 SVG 被设置为根本不显示在页面上。为 h2 标记设置相对应的字体的字体。

svg {
    display: none;
}
h2 {
    font-size: 5.5vw;
    font-family: 'Crete Round', serif;
}

05. 加入 headline

把 line-height 设置为零，由于稍后标题将被加上动画效果，因此控制页面上的缩放很重要。它设定了 padding 值，使其周围可以有适量的空间，颜色也会改变。

.headline {
    line-height: 0;
    display: inline-block;
    padding: 70px;
    color: #ccffff;

06. 完成 headline

SVG 将用于替换标题文本

在完成 headline 类后，下一行将 SVG 中的 displacementFilter ID应用于文本。 translate3d 确保用硬件加速去处理文本。把 scale 稍微改变一点，以确保当发生位移时看起来是正确的。

filter: url(#displacementFilter);
    transform: translate3d(0, 0, 0);
    transform: scaleY(1.8) rotateY(-2deg);
}

07. 替换它

如今文本被替换了

若是在此阶段测试滤镜，则波纹效果会彻底取代文本。这很容易解决。回到 index.html 页面中的滤镜代码。这样将应用波纹和源图形（即文本），并将其应用为位移滤镜。尝试改变波纹的频率和振幅。

<feDisplacementMap in2="turbulence" in="
SourceGraphic" scale="30" xChannelSelector="R" 
yChannelSelector="G" result="disp" />

08. 柔化边缘

使用高斯模糊来柔化文本

水边效果的边缘看起来有点扎眼。这能够用高斯模糊来解决。在置换贴图后面添加代码。当你刷新页面时，它确实模糊了文本，但位移也消失了。一样这些问题能够在实现效果的过程当中被修复。

<feGaussianBlur in="SourceGraphic" 
stdDeviation="15" result="blr" />

09. 组合二者

把模糊和位移进行组合，能够得到更使人愉悦的效果

在以前的高斯模糊下面添加复合线。你将看到会把模糊和位移效果结合在一块儿，而且还为文本建立了水润的半透明效果。它的边缘已经在某种程度上变得柔和了，可是这还不够。若是能把最初的模糊效果加入到这里效果会很好。

<feComposite in="blr" in2="disp" operator="in" result="comp" />

10. 合并模糊

经过合并操做，它看起来会更好

合并操做使前面的效果与模糊效果合并。如今看上去与背景图像很搭，就好像光线穿过了水面同样。对于文原本说它仍然是可选择的，而且是页面的一部分，这点和在 Photoshop 中做出的效果彻底不同。

<feMerge result="final">
                <feMergeNode in="blr" />
                <feMergeNode in="comp" />
            </feMerge>

11. 建立动画

回到 page.css 文件并添加关键帧，以下所示。这将会把字体大小从零垂直宽度扩展到 5.5 垂直宽度。把它应用于标题后，文本会在屏幕上放大并被放置到位。随着文本的移动，位移也会随着长度的变化而变化，产生水纹效果。

@keyframes scaler {
    from {
        font-size: 0vw;
    }
    to {
        font-size: 5.5vw;
    }
}

12. 更改 h2 样式

替换 h2 以引入一些动画

以前在步骤 4 中添加了 h2 样式。使用下面这段新代码替换旧代码，这段代码将为标题添加四秒的 CSS 动画。动画中止会停留在最后一个关键帧上。保存文件并在浏览器中测试，检查文本是否到位。

h2 {
    line-height: 0;
    font-size: 0vw;
    animation-name: scaler;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    font-family: 'Crete Round', serif;
}

13. 添加导航

接下来让咱们用另一个 SVG 滤镜建立一个水斑动画。将如下导航内容添加到正文代码的最顶部，也就是本教程第一步中开始的标题以前。这将在一个圆内建立一个看上去像汉堡🍔的菜单图标。

<nav class="menu">
        <input type="checkbox" href="#" class=
        "menu-open" name="menu-open" id="menu-
        open" />
        <label class="menu-open-button" 
        for="menu-open">
            <span class="hamburger 
            hamburger-1"></span>
            <span class="hamburger 
            hamburger-2"></span>
            <span class="hamburger 
            hamburger-3"></span>
        </label>

14. 完成导航

如今添加其他的导航元素。咱们使用 Font Awesome 开源图标库，该库已被添加到 head 部分，以便使用该库的CDN连接。每一个菜单圆形元素都有一个图标。

<a href="#" class="menu-item"> <i class="fa 
fa-car"></i> </a>
        <a href="#" class="menu-item"> <i 
        class="fa fa-ship"></i> </a>
        <a href="#" class="menu-item"> <i 
        class="fa fa-map"></i> </a>
        <a href="#" class="menu-item"> <i 
        class="fa fa-suitcase"></i> </a>
    </nav>

15. 添加新滤镜

接着为这个效果添加另外一个滤镜。在SVG中，在先前添加的滤镜标记代码的后面添加如下代码。这里的效果用和前面很是类似的方式创建起来。这将使菜单看起来像粘稠的液体同样分开。

<filter id="shadowed-blob">
            <feGaussianBlur in="SourceGraphic" 
            result="blur" stdDeviation="20" />
            <feColorMatrix in="blur" mode=
            "matrix" values="1 0 0 0 0  0 1 0 0 
            0  0 0 1 0 0  0 0 0 18 -7" 
            result="blob" />
            <feGaussianBlur in="blob" 
            stdDeviation="3" result="shadow" />
            <feColorMatrix in="shadow" mode=
            "matrix" values="0 0 0 0 0  0 0 0 0 
            0  0 0 0 0 0  0 0 0 1 -0.2" 
            result="shadow" />

16. 完成过滤镜

此处添加了滤镜的剩余部分，这将完成菜单项上的效果。并添加液体斑点效果。添加完代码后保存文件，而后切换到 'design.css' 文件。

<feOffset in="shadow" dx="0" dy="2" 
            result="shadow" />
            <feComposite in2="shadow" in="blob" 
            result="blob" />
            <feComposite in2="blob" 
            in="SourceGraphic" result="mix" />
        </filter>

17.应用滤镜

CSS 代码也能够添加到其它文件中，可是为了将全部导航 CSS 放在同一个地方，咱们仍是把下面的代码写到 design.css 中。这里的滤镜会被用于菜单，这是一个固定的菜单，会始终显示在屏幕上。

.menu {
    filter: url(“#shadowed-blob");
    position: fixed;
    padding-top: 20px;
    padding-left: 80px;
    width: 650px;
    height: 150px;
    box-sizing: border-box;
    font-size: 20px;
    text-align: left;
}

18. 使菜单工做

当菜单打开时，菜单图标被设置为不可见。而后建立每一个菜单项的悬停元素，以便当用户将鼠标悬停在上面时进行更改。当菜单项返回其原始位置时，菜单的每一个子项都会有 0.4 秒的变换时间。

.menu-open {
    display: none;
}
.menu-item:hover {
    background: #47959f;
    color: #b2f0f8;
}
.menu-item:nth-child(3), .menu-item:nth-
child(4), .menu-item:nth-child(5), .menu-
item:nth-child(6) {
    transition-duration: 400ms;
}

19. 添加菜单图标

更改菜单图标的 z-index 以将其置于顶部

经过更改其 z-index，菜单图标高于其余元素。当用户将鼠标悬停在菜单上时，菜单会滑出，单击菜单后其上的三条横线会变为 “X”，表示收起菜单。

.menu-open-button {
    z-index: 2;
    transition-timing-function: cubic-
    bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 400ms;
    transform: scale(1.1, 1.1) translate3d
    (0, 0, 0);
    cursor: pointer;
}
.menu-open-button:hover {
    transform: scale(1.2, 1.2) translate3d
    (0, 0, 0);
}

20.移动元素

第一个菜单项其实是菜单的第三个子项，由于它前面还有一个复选框和汉堡包样式的图标。添加这一项可以使第一个菜单元素在用户单击菜单后移动到位。每一个菜单元素都会以稍长的时间移出。

.menu-open:checked + .menu-open-button {
    transition-timing-function: linear;
    transition-duration: 400ms;
    transform: scale(0.8, 0.8) translate3d
    (0, 0, 0);
}
.menu-open:checked ~ .menu-item {
    transition-timing-function: cubic-
    bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
    transition-duration: 390ms;
    transform: translate3d(110px, 0, 0);
}

21.解决剩下的动做

以不一样的速度移动菜单元素以得到更加流畅的效果

剩余的菜单元素以不一样的速度移出来。这使得菜单元素可以在动画的早期阶段粘在一块儿，在这里用了 SVG 滤镜提供的斑点液体外观。添加下列代码后保存文件并在浏览器中查看完成的结果。

.menu-open:checked ~ .menu-item:nth-child(4) {
    transition-duration: 490ms;
    transform: translate3d(220px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
    transition-duration: 590ms;
    transform: translate3d(330px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
    transition-duration: 690ms;
    transform: translate3d(440px, 0, 0);
}

---

本文首发微信公众号：jingchengyideng

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

---

欢迎继续阅读本专栏其它高赞文章：

• 12个使人惊叹的CSS实验项目
• 世界顶级公司的前端面试都问些什么
• CSS Flexbox 可视化手册
• 过节很无聊？仍是用 JavaScript 写一个脑力小游戏吧！
• 从设计者的角度看 React
• CSS粘性定位是怎样工做的
• 一步步教你用HTML5 SVG实现动画效果
• 程序员30岁前月薪达不到30K，该何去何从
• 7个开放式的前端面试题
• React 教程：快速上手指南