资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/一步步教你用 CSS 为 SVG 添加滤镜

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

binta / 3451人阅读

摘要：柔化边缘使用高斯模糊来柔化文本水边效果的边缘看起来有点扎眼。组合两者把模糊和位移进行组合，可以获得更令人愉悦的效果在之前的高斯模糊下面添加复合线。创建动画回到文件并添加关键帧，如下所示。动画停止会停留在最后一个关键帧上。

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

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

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

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

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

从FileSilo下载本教程的源码

01. 开始

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


        

            
Underwater 
            Adventure Park
02. 完成标题

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

Experience the Ocean 

Like Never Before

                
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!
03. 创建一个 SVG 滤镜

SVG 代码可以添加到页面的任何位置，但是因为它不会被用户直接看到，所以最好将它放在闭合 body 标签之前的最底部。 SVG 滤镜产生一些波纹效果。请注意，滤镜具有 ID —— 这使 CSS 能够把它应用到页面上的另一个元素。
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 页面中的滤镜代码。这样将应用波纹和源图形（即文本），并将其应用为位移滤镜。尝试改变波纹的频率和振幅。

08. 柔化边缘

使用高斯模糊来柔化文本

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

09. 组合两者

把模糊和位移进行组合，可以获得更令人愉悦的效果

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

10. 合并模糊

通过合并操作，它看起来会更好

合并操作使前面的效果与模糊效果合并。现在看上去与背景图像很搭，就好像光线穿过了水面一样。对于文本来说它仍然是可选择的，并且是页面的一部分，这点和在 Photoshop 中作出的效果完全不一样。
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 滤镜创建一个水斑动画。将以下导航内容添加到正文代码的最顶部，也就是本教程第一步中开始的标题之前。这将在一个圆内创建一个看上去像汉堡

云服务器 GPU云服务器 教你用 教你用阿里云开我的世界服务器 一步步搭建框架 一步步搭建物联网系统

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116032.html

相关文章

发表评论

登陆后可评论

0条评论

binta

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<