后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何创建故障效果 🤖 纯 CSS
介绍
演示
HTML
CSS
结束
介绍
今天我想讲讲如何使用 CSS 制作故障艺术效果。为此，我将使用最常用的选项之一。这是我们pseudo-elements在创建copies主要元素时使用的。
演示
HTML
在 HTML 部分，我们只需要创建 1 个标签，在其中写入文本，并在data-text属性中复制它。
就像这样：
<h1 class="glitch" data-text="Glitch">Glitch</h1>
您可以指定任何标签。不必使用文本标签。
CSS
我们需要考虑到pseudo-elements文本的应该与大致位于同一position位置main text。
因此，对于pseudo-elements，我们需要指定position值为 的属性absolute。
.glitch {
position: relative;
&::before,
&::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
}
现在我们的文本和它的副本彼此重叠。
在我们继续创建 Glitch 效果之前，最好为文本添加样式以使其看起来更美观。
为此，我将制作我们的sans-serif字体，字体大小为larger，我们创建shadows一个linear gradient完整的copies文本。
.glitch {
position: relative;
font-family: sans-serif;
font-size: 7em;
text-transform: uppercase;
text-shadow: 6px -6px 0px #fd5f00;
background: repeating-linear-gradient(45deg, #005792, #005792 1px, #fff 2px, #fff 3px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
结果：
改变伪元素
现在我们需要将每个伪元素向不同的方向移动。为了实现文本移动的效果，就像故障期间发生的那样，这很有必要。
为了做到这一点，我们需要将move每个伪元素从相反的方向拉出each other几个pixels。
&::before {
left: 7px;
text-shadow: 1px 0 #fd5f00;
}
&::after {
left: 3px;
text-shadow: -1px 0 #fd5f00;
}
我决定让伪元素阴影的颜色与主阴影的颜色相同，但你可以让它们不同，以达到使用black和blue颜色的坏电视的效果。
夹子
接下来，我们需要使用 clip 属性。
clip 属性定义了定位元素内容的显示区域。超出该区域的内容将被截断，变得不可见。
我们使用此属性来交替显示cropped parts我们的伪元素。
句法：
剪辑：矩形（Y1，X1，Y2，X2）；
这些值是从元素边缘到剪辑区域的距离。
剪辑：矩形（
top/// ）right；bottomleft
因此，为了我们的伪元素，我们在右侧completely crop设置了缩进。（您可以根据元素的大小使用任意值）900 pixels
&::before,
&::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
right: 0;
background: $secondaryColor;
color: $primaryColor;
clip: rect(0, 900px, 0, 0);
overflow: hidden;
}
伪元素的background属性要和背景完全一致，这样才能融合，显示上不会出现问题，这一点很重要。
剪辑动画
为了定性地为我们的元素制作动画，我们需要创建一个分步动画，其中我们将改变属性中的first和值，以便我们的伪元素在从上到下的动画过程中仅部分显示。thirdclip
在这种情况下，属性的second和值必须保持不变。fourthclip
$steps: 20;
@keyframes glitch-effect{
@for $i from 0 through $steps{
#{percentage($i*(1/$steps))}{
clip: rect(random(100) + px, 9999px, random(100) + px, 0);
}
}
}
我个人使用20-step动画，但您可以指定任意数量的步数，因为动画是静止的，random并且会改变属性本身的值clip。您指定的步数越多，faster动画效果就越好。
现在我们只需要将动画附加到两个伪元素上。还需要为每个伪元素指定不同的动画播放时间。这样就能实现更加混乱的故障动画效果。
&::before {
left: 7px;
text-shadow: 1px 0 #fd5f00;
animation: glitch-effect 3s infinite linear alternate-reverse;
}
&::after {
left: 3px;
text-shadow: -1px 0 #fd5f00;
animation: glitch-effect 2s infinite linear alternate-reverse;
}
就这些了。
结束
好了，就是这样。这是一个非常简单且非常流行的纯 CSS 故障效果创建方法。非常感谢你花时间阅读我的文章。
不要切换。