摘要:柔化边缘使用高斯模糊来柔化文本水边效果的边缘看起来有点扎眼。组合两者把模糊和位移进行组合,可以获得更令人愉悦的效果在之前的高斯模糊下面添加复合线。创建动画回到文件并添加关键帧,如下所示。动画停止会停留在最后一个关键帧上。
翻译:疯狂的技术宅
原文:https://www.creativebloq.com/...
本文首发微信公众号:jingchengyideng
欢迎关注,每天都给你推送新鲜的前端技术文章
自21世纪初以来,SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重点将放在 SVG 的滤镜上 —— 但不只是将它们应用于 SVG 图像,我将向你展示如何将它们应用于任何常规页面的内容上。
实际上我们是通过告诉 CSS 滤镜所拥有的 ID,然后再把滤镜应用于 SVG 的方式来实现。使用同样的方法,滤镜也可以用于常规文本。关于这一点的好处在于,你可以轻松的为文本添加一些出彩的特效,以前只能通过使用 Photoshop 滤镜并保存为图像来实现。使用SVG滤镜,文本仍然是可访问并可选的,因为它只是页面上的常规文本元素。
这里的代码将为文本创建一个置换贴图,这个贴图还包含一个 alpha 贴图,使其看起来像水一样,并符合我们页面的主题。然后创建另一个滤镜,使菜单显示为水斑点,它们会稍微粘在一起,但会随着它们向远处移动而分开。这也是为了和特定页面的主题保持一致,并展示了将 SVG 滤镜用于其他内容的两种创造性方法。
从FileSilo下载本教程的源码
01. 开始首先,你需要从上面的链接下载项目文件。之后将项目文件夹 start 拖到代码 IDE 上,然后打开 index.html 页面。你将会看到一些已经写好的页面内容。接下来创建标题部分,这里将包含受 SVG 滤镜影响的标题。在 body 标签内添加代码。
03. 创建一个 SVG 滤镜Underwater Adventure Park
02. 完成标题现在标题已完成,所有文本都已就绪。如果你此刻在浏览器中查看页面,将看到一个带有一些文本的图像。当前标题仍然是没有样式的,接下来为它设置样式并应用 SVG 滤镜。
Experience the Ocean
Like Never BeforeUnderwater Adventure Park is an experience unlinke anything you have ever had. Travel to the depths of the Ocean and walk among the Sea Life!
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 滤镜创建一个水斑动画。将以下导航内容添加到正文代码的最顶部,也就是本教程第一步中开始的标题之前。这将在一个圆内创建一个看上去像汉堡
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116032.html
摘要:最近推出了新版的,并希望能够在浏览器中检测到新加入的深色模式。能够对页面容器上的边框阴影进行更新,使其在使用深色模式时不太透明。利用使用为按钮创建不同的样式和交互我们可以利用为深色和浅色主题的按钮创建不同的样式和悬停交互。 翻译:疯狂的技术宅原文:https://www.creativebloq.com/... 本文首发微信公众号:jingchengyideng欢迎关注,每天都给你...
摘要:经过一番研究,我收集了个最好的库,你可以用在自己的项目中。该库于年月首次推出,目前仍有近名参与者开发。超过的,是一个动画库,可以处理属性单个转换或任何属性,以及对象。对智能设备的方向作出反应的视差引擎快速创建漂亮的动画。 翻译:疯狂的技术宅原文:https://blog.bitsrc.io/11-jav... 当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多推...
摘要:通过面试者的答案可以得知他都知道哪些开发语言。这个问题的答案能够知道求职者有没有可靠的资源,这些资源在未来开展项目时可能会派上用场。对这个问题的诚实回答可以帮助面试官为求职者提供合适的团队。 翻译:疯狂的技术宅原文:https://www.indeed.com/hire/i... 不管你是面试官还是求职者,里面的思路都能让你获益匪浅。 你用 CSS 多久了? 解析: 这个问题可以让面...
摘要:翻译疯狂的技术宅原文许多前端开发人员都在用为他们的网站设计样式。一些人喜欢在中添加一些自己偏好的样式,我也一样。我认为这是令人难以置信和奇怪的。不同的浏览器为表单元素和按钮设置了不同的边框样式。这种风格的问题是它的特异性低。 翻译:疯狂的技术宅原文:https://medium.freecodecamp.o... 许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些...
阅读 2222·2023-04-25 23:15
阅读 1816·2021-11-22 09:34
阅读 1489·2021-11-15 11:39
阅读 828·2021-11-15 11:37
阅读 2093·2021-10-14 09:43
阅读 3423·2021-09-27 13:59
阅读 1463·2019-08-30 15:43
阅读 3397·2019-08-30 15:43