跳到主要内容

如何在CSS中创建毛刺文本和图像效果

在本教程中,我们将向您展示如何创建毛刺文本效果。特效和动画可以帮助网站脱颖而出,在用户有机会阅读主要内容之前立即对用户产生影响。如果您的主页需要让访问者惊叹,您可以使用CSS创建大量不同的效果。

我们在这里创建毛刺文本的过程实际上与使用动画软件非常相似。我们将关键帧放在特定点,并使用它们来控制操作。 CSS中关键帧的不同之处在于它们被写为代码中动画时间轴的百分比。这听起来并不像听起来那么令人生畏 - 一旦你尝试了它,它就会相对简单地取得好成绩。

本教程中将使用少量JavaScript - 在图像加载到页面后删除加载屏幕 - 但主要关注的是CSS动画。我们也会用CSS网格在屏幕上定位元素。

01.设置好

要开始,请打开开始来自的文件夹项目文件在你的代码编辑器中。打开的index.html页面,其中只包含一个准系统骨架HTML页面。在head部分,字体需要链接,以便正确显示设计。添加字体的样式链接。

CSS中的基本布局已经开始了的site.css文件,但所有与毛刺效应有关的重要部分将在以后添加。在文档的head部分链接CSS,以便页面的基本设计到位。

03.设置加载屏幕

Black home screen with brand icon

页面加载时将显示此屏幕

现在转到页面的正文部分。它包含显示在浏览器中的页面的所有可见元素。这里添加一个div,它将保存“预加载器屏幕”,直到页面上的所有内容都加载完毕。这将在页面中央显示一个徽标。

04.添加标题栏

Black home screen with title and short description displayed

在添加毛刺文本效果之前,设计的基本元素

屏幕顶部将是一个小标题,其中包含左侧站点的SVG徽标和文本标题。然后在屏幕的右侧,将有一个内嵌菜单,便于导航。这里代码的结构将这些元素添加到页面上。

HackerCon

05.添加图片

现在,下面的部分包含了相同图像的几个版本Glitchit类。这将做的是让这些图像的不同部分在不同时间打开和关闭以产生毛刺效果。在此之后是将位于图像顶部的文本。

黑客骗局

增加一个说明

06.触发毛刺文本效果

在正文内容的末尾放置JavaScript标记。所有这一切都是检查页面是否已加载,然后移除加载屏幕,这反过来通过向主体添加类来影响相关的毛刺部分来触发毛刺效果动画。

07.设置CSS变量

立即保存页面并转到的site.css文件在CSS文件夹中。这里已有代码,但正好在任何其他代码之上添加下面显示的变量。这些CSS变量将包含稍后将在设计中使用的颜色和大小。

body {--color-text:#fff; --color-bg:#000; --color-link:#555; --color-link-hover:#98fadf; --color-info:#f7cfb9; --glitch-width:100vw; --glitch-height:100vh; --gap-horizontal:10px; --gap-vertical:5px; --time-anim:4s; --delay-anim:2s;

08.尝试变量设置

正如您将看到的,这些变量被分配给body标签,因此它们可以被身体内部页面上的任何标签使用,这实际上是所有可见页面。这里为不同的图像设置了透明度和混合模式。有五个图像,您可以尝试这些设置以获得不同的结果。

--blend-mode-1:none; --blend-mode-2:overlay; --blend-mode-3:none; --blend-mode-4:none; --blend-mode-5:overlay; --blend-color-1:透明; --blend-color-2:#7d948e; --blend-color-3:透明; --blend-color-4:透明; --blend-color-5:#af4949; }

09.在屏幕上填充图像

要将代码整齐地放在一起,请向下滚动到标记CSS文件中步骤9到13的注释,并添加此代码。这里的毛刺代码定位了DIV包含所有图像以填满整个屏幕并完全位于屏幕的左上角。请注意,它从CSS变量获取其宽度和高度。

.glitch {position:absolute;顶部:0;左:0; width:var( - 毛刺宽度); height:var( -  glitch-height);溢出:隐藏; }

10.调整图像定位

Homepage with fullscreen photograph added

毛刺效应使用同一图像的重新定位副本

由于毛刺效果是由同一图像的副本组成的,因此该代码定位每个DIV在页面中,使它略大于屏幕。它将它从顶部和左侧定位以考虑它更大,然后将图像放置在背景中以填充图像。

.glitchit {position:absolute; top:calc(-1 * var( -  gap-vertical)); left:calc(-1 * var( -  gap-horizontal)); width:calc(100%+ var( -  gap-horizontal)* 2);高度:calc(100%+ var( -  gap-vertical)* 2); background:url(../ img / main.jpg)no-repeat 50%0; background-color:var( -  blend-color-1);背景尺寸:封面; transform:translate3d(0,0,0); background-blend-mode:var( -  blend-mode-1); }

11.选择图像

这里的代码选择除第一个图像之外的每个图像。这是因为第一个图像停留在页面上,而其他图像则通过关键帧动画在顶部打开和关闭。隐藏这些顶部图像,直到不透明度设置为零为止。

.glitchit:nth-child(n + 2){opacity:0; } .imgloaded .glitchit:nth-child(n + 2){animation-duration:var( -  time-anim); animation-delay:var( -  delay-anim);动画定时功能:线性; animation-iteration-count:无限; }

12.调整图像2和3

第二个和第三个图像设置为在此代码中设置动画。它们被赋予相应的混合和颜色模式,以便它们以不同的方式显示。这里最大的区别是它们被赋予不同的关键帧动画以便混合使用。

效果。 .imgloaded .glitchit:nth-child(2){background-color:var( -  blend-color-2); background-blend-mode:var( -  blend-mode-2);动画名称:glitch-1; } .imgloaded .glitchit:nth-child(3){background-color:var( -  blend-color-3); background-blend-mode:var( -  blend-mode-3);动画名称:故障2; }

13.调整图像4和5

这次接下来的两个图像设置得非常接近其他图像,但这次又有不同的混合模式和动画来显示这些图像。尚未为其中一些动画创建关键帧,接下来将会出现这些关键帧。

.imgloaded .glitchit:nth-child(4){background-color:var( -  blend-color-4); background-blend-mode:var( -  blend-mode-4);动画名称:故障-3; } .imgloaded .glitchit:nth-child(5){background-color:var( -  blend-color-5); background-blend-mode:var( -  blend-mode-5);动画名称:故障闪光; }

14.添加第一组关键帧

关键帧的工作原理是抓取图像的不同部分并将其剪切下来,这样才能看到。不透明度在不同时间打开和关闭,以使图像的某些部分在与其他动画不同的时间可见,从而产生毛刺效果。图像在x轴上稍微移动。

@keyframes glitch-1 {0%{opacity:1; transform:translate3d(var( -  gap- horizontal),0,0); clip-path:polygon(0 2%,100%2%,100%5%,0 5%); } 2%{clip-path:polygon(0 15%,100%15%,100%15%,0 15%); }

15.使用剪辑路径

剪辑路径采用矩形,因此前两个数字是左上角,然后是右上角。接下来是右下角和左下角。通过移动这些数字,图像的不同部分在不同点处变得可见。

4%{clip-path:polygon(0 10%,100%10%,100%20%,0 20%); } 6%{clip-path:polygon(0 1%,100%1%,100%2%,0 2%); 8%{clip-path:polygon(0 33%,100%33%,100%33%,0 33%); } 10%{clip-path:polygon(0 44%,100%44%,100%44%,0 44%); }

16.加快运动

通过在多个关键帧上快速移动剪辑路径,效果会逐渐增强,并且图像的不同部分会以不稳定的方式闪烁。添加更多层图像也正在执行此操作,效果非常好。

12%{clip-path:polygon(0 50%,100%50%,100%20%,0 20%); 14%{clip-path:polygon(0 70%,100%70%,100%70%,0 70%); } 16%{clip-path:polygon(0 80%,100%80%,100%80%,0 80%); 18%{clip-path:polygon(0 50%,100%50%,100%55%,0 55%); } 20%{clip-path:polygon(0 70%,100%70%,100%80%,0 80%); }

17.完成图像毛刺

22%后,图像关闭,直到动画再次播放。这完成了毛刺-1效果毛刺-2毛刺-3已经在代码中提供。下一部分也会出现图像顶部的文本。

21.9%{不透明度:1; transform:translate3d(var( -  gap- horizontal),0,0); 22%,100%{不透明度:0; transform:translate3d(0,0,0); clip-path:polygon(0 0,0 0,0 0,0 0); }}

18.如何创建小故障文本

Text cropped to show glitch effect in progress on homepage

该文本仅被短暂修剪,以确保它仍然可读

此代码与前面的代码非常相似,只是它将文本翻转翻转然后将其剪切,以提供显着移动的跳跃效果。在此之后,剪辑路径仅显示较小的部分,通过关键帧快速移动。

@keyframes glitch-text {0%{transform:translate3d(calc(-1 * var( -  gap-horizontal)),0,0)scale3d(-1,-1,1); clip-path:polygon(0 20%,100%20%,100%21%,0 21%); } 2%{clip-path:polygon(0 33%,100%33%,100%33%,0 33%); } 4%{clip-path:polygon(0 44%,100%44%,100%44%,0 44%); }

19.更多裁剪

通过快速改变剪切路径的形状,该部分代码中的效果仍在继续。该夹路径也附带了-webkit-前缀但为简洁起见,此处的任何代码均未显示。在撰写本文时,IE,Edge或Opera Mini目前不支持剪辑路径,但在所有其他浏览器中都是如此。

5%{clip-path:polygon(0 50%,100%50%,100%20%,0 20%); } 6%{clip-path:polygon(0 70%,100%70%,100%70%,0 70%); 7%{clip-path:polygon(0 80%,100%80%,100%80%,0 80%); 8%{clip-path:polygon(0 50%,100%50%,100%55%,0 55%); }

20.翻回文本

在最终文本故障动画中,文本翻转回原始位置并等待关键帧再次出现。正如您所看到的,所有动画都以10%的速度发生,同时90%的时间处于休眠状态,为文本提供了适当的遇险并使其可读。

9%{clip-path:polygon(0 70%,100%70%,100%80%,0 80%); } 9.9%{transform:translate3d(calc(-1 * var( -  gap-horizontal)),0,0)scale3d(-1,-1,1); } 10%,100%{transform:translate3d(0,0,0)scale3d(1,1,1); clip-path:polygon(0 0,100%0,100%100%,0%100%); }}

21.创建快速闪光

Homepage with glitch effect in progress

每隔几秒就会出现一次毛刺效应,让人感觉不舒服

最后一步是给一个图像提供毛刺 - 闪光动画,这一系列的关键帧只是将图像放在屏幕上,在短时间内具有20%的不透明度,只是为了给出原始的偏移。现在保存CSS文件,一旦内容在浏览器中加载,效果应该开始播放。

@keyframes glitch-flash {0%,5%{不透明度:0.2; transform:translate3d(var( -  gap- horizontal),var( -  gap-vertical),0); } 5.5%,100%{不透明度:0; transform:translate3d(0,0,0); }}

本文最初发表于创意网页设计杂志Web Designer。买第281期要么订阅

阅读更多:



翻译字数超限