本文介绍了如何使用CSS动画和clip-path属性创建一种实验性的图像故障效果。通过叠加多层图像，每层应用不同的clip-path、混合模式和位移，实现了类似故障的视觉效果。虽然此技术在旧版浏览器中不支持，但提供了使用CSS变量进行参数调整的灵活性。文章还展示了关键的CSS代码片段和动画实现过程。
css手机圆角毛刺
Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it. It was inspired by the technique seen on the speakers page of the 404 conference.
今天，我们想向您展示如何在图像上创建类似实验性的小故障效果。 该效果将由CSS动画和clip-path属性提供动力。 该技术涉及使用几层图像，其中每层图像都有一个剪切路径，一个混合模式和一个平移。 它的灵感来自404会议发言人页面上看到的技术。
We also use CSS variables for setting some properties that will allow for an easy adjustment of the effect.
我们还使用CSS变量来设置一些属性，以方便调整效果。
分解效果 (Breaking down the effect)
When searching the web for an easy to use and light-weight glitch implementation, we came across this question on Reddit. Somebody was asking how the glitch effect was pulled off on the speaker line up page of the 404 conference. The glitch effect was made using CSS animations on a stack of three images that are the same. The animations consist of a rapidly changing clip property on all layers except the first one. Additionally, the layers are being moved slightly. So what we are seeing, is slices of the image, slightly offset and in constant movement.
在网上搜索易于使用且轻巧的故障实现时，我们在Reddit上遇到了这个问题。 有人问404会议的演讲者排队页面上的毛刺效应是如何产生的。 使用CSS动画在三张相同的图像堆栈上产生了毛刺效果。 动画包括除第一层以外的所有层上快速变化的剪辑属性。 此外，各层将略微移动。 因此，我们看到的是图像的切片，略微偏移并不断移动。
We wanted to experiment with this and recreate the effect using the clip-path property instead. Although it has less browser support (it doesn’t work in IE or Edge), it allows for a more flexible usage since we can use percentage values and apply it to elements that are not necessarily positioned absolutely.
我们想要对此进行试验，并使用clip-path属性来重新创建效果。 尽管它对浏览器的支持较少(它不适用于IE或Edge)，但它允许更灵活的使用，因为我们可以使用百分比值并将其应用于不一定绝对定位的元素。
Combining the effect with background blend modes, allows us to create some interesting looking image effects.
将效果与背景混合模式结合使用，可以创建一些有趣的图像效果。
The way this works is to create an image stack where each overlaying image will animate its clip-path in, what looks like, random sizes. We’ll use a stack of 5 images:
这种方法的工作方式是创建一个图像堆栈，其中每个叠加图像将以随机大小的形式动画化其剪切路径。 我们将使用5张图片的堆栈：
<div class="glitch glitch--style-1">
<div class="glitch__img"></div>
<div class="glitch__img"></div>
<div class="glitch__img"></div>
<div class="glitch__img"></div>
<div class="glitch__img"></div>
</div>Let’s have a look at the main styles for the hover effect that you can see in the last demo. Note that we’ve defined some variables previously, but they should be self-explanatory:
让我们看一下您在上一个演示中可以看到的悬停效果的主要样式。 请注意，我们之前已经定义了一些变量，但是它们应该是不言自明的：
.glitch {
position: relative;
width: var(--glitch-width);
max-width: 400px;
height: var(--glitch-height);
max-height: calc(400px * 1.25);
overflow: hidden;
margin: 0 auto;
}
.glitch:hover {
cursor: pointer;
}
.glitch__img {
position: absolute;
top: calc(-1 * var(--gap-vertical));
left: calc(-1 * var(--gap-horizontal));
width: calc(100% + var(--gap-horizontal) * 2);
height: calc(100% + var(--gap-vertical) * 2);
background: url(../img/1.jpg) no-repeat 50% 0;
background-color: var(--blend-color-1);
background-size: cover;
background-blend-mode: var(--blend-mode-1);
}We don’t want to show the sides being cut off, so we make sure that the image dimensions take the gap, i.e. the movement into consideration.
我们不想显示被切除的侧面，因此我们确保图像尺寸考虑了间隙，即运动。
Then, we set the background colors and blend modes for each layer:
然后，我们为每一层设置背景色和混合模式：
/* Set the background colors for the glitch images*/
.glitch__img:nth-child(2) {
background-color: var(--blend-color-2);
background-blend-mode: var(--blend-mode-2);
}
.glitch__img:nth-child(3) {
background-color: var(--blend-color-3);
background-blend-mode: var(--blend-mode-3);
}
.glitch__img:nth-child(4) {
background-color: var(--blend-color-4);
background-blend-mode: var(--blend-mode-4);
}
.glitch__img:nth-child(5) {
background-color: var(--blend-color-5);
background-blend-mode: var(--blend-mode-5);
}As this is going to be a hover effect, we want all layers except the first one to be hidden by default:
由于这将是一个悬停效果，因此我们希望默认情况下隐藏除第一个图层以外的所有图层：
.glitch__img:nth-child(n+2) {
opacity: 0;
}Then, on hover, we show all layers:
然后，在悬停时，我们显示所有图层：
.glitch:hover .glitch__img:nth-child(n+2) {
opacity: 1;
}And we also apply the animations and a transform to each layer:
我们还将动画和变换应用于每个图层：
.glitch:hover .glitch__img:nth-child(2) {
transform: translate3d(var(--gap-horizontal),0,0);
animation: glitch-anim-1-horizontal var(--time-anim) infinite linear alternate;
}
.glitch:hover > .glitch__img:nth-child(3) {
transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
animation: glitch-anim-2-horizontal var(--time-anim) infinite linear alternate;
}
.glitch:hover > .glitch__img:nth-child(4) {
transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
animation: glitch-anim-3-horizontal var(--time-anim) infinite linear alternate;
}
/* Hover flash animation on last image */
.glitch:hover > .glitch__img:nth-child(5) {
animation: glitch-anim-flash 0.5s steps(1,end) infinite;
}The calc(-1 * var(--gap-horizontal)) basically allows us to set a negative value of a given variable.
calc(-1 * var(--gap-horizontal))基本上允许我们设置给定变量的负值。
Have a look at this slow motion visualization to see what’s going on under the hood (this GIF is quite big, so it might take a while to load):
看一下这个慢动作的可视化效果，看看引擎盖下发生了什么(这个GIF很大，因此加载可能要花一些时间)：
The last layer is only flashing and moving slightly while the others also get cut by a clip-path.
最后一层只是闪烁并稍微移动，而其他层也被剪切路径剪切。
Let’s have a look at one of the animations for setting the clip-path:
让我们看一下设置剪切路径的动画之一：
@keyframes glitch-anim-1-horizontal {
0% {
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
}
10% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
20% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
30% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
40% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
50% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
60% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
70% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
80% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
90% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
100% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
}The slices will go from tiny, to a bit larger and also nothing, leaving a “pause” on some of the frames and then starting again from another position.
切片会从很小的部分变为更大的部分，也没有任何内容，在某些帧上留下“暂停”，然后从另一个位置重新开始。
A great tool to visualize clip paths is Clippy by Bennett Feely.
Bennett Feely的Clippy是可视化剪辑路径的绝佳工具。
The final animation is a simple flash of the last layer:
最终的动画是最后一层的简单动画：
@keyframes glitch-anim-flash {
0% {
opacity: 0.2;
transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
}
33%, 100% {
opacity: 0;
transform: translate3d(0,0,0);
}
}This looks especially interesting when applying an overlay blend mode with a fitting color.
当应用具有合适颜色的叠加混合模式时，这看起来特别有趣。
Note that we can also apply this effect to text elements. Check out the demos to see it in action!
注意，我们也可以将此效果应用于文本元素。 查看演示以查看实际操作！
And that’s it! We hope you’ve found some inspiration in this little experiment.
就是这样！ 希望您在这个小实验中能找到启发。
参考和鸣谢 (References and Credits)
Images by Unsplash.com
图片来自Unsplash.com
imagesLoaded by Dave DeSandro
图片由Dave DeSandro加载
翻译自: https://tympanus.net/codrops/2017/12/21/css-glitch-effect/
css手机圆角毛刺
扫一扫
1496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
