如何为图像和 SVG 创建纯 CSS 故障动画🤖 简介演示图像 SVG 结束 {percentage($i*(1/$steps))}{

2025-05-25

如何为图像和 SVG 创建纯 CSS 故障动画🤖

介绍

演示

图片

SVG

结束

{百分比($i*(1/$步长))}{

介绍

几周前，我写了一篇关于如何在纯 CSS 上制作故障光效的文章。不过在那篇文章中，我讲的是如何只为文本制作类似的效果。今天，我想教给大家如何在图片和 SVG 上实现类似的动画。

凯尔辛

如何创建故障效果 🤖 纯 CSS

罗登・21年8月20日

#webdev #beginners #tutorial #css

演示

图片

其实，这里的一切都非常简单。几乎和文本动画的技术一样。

HTML

用图片创建我们的块：



<div class="img"></div>
Enter fullscreen mode Exit fullscreen mode

CSS（SCSS）

1）我们为其设置样式（尺寸和图片）



.img {
    position: relative;
    width: 400px;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(https://rawcdn.githack.com/Kerthin/links/247cc9065bac7d5c23b45ff677bf1d2bceeb4324/img/glitch/imgTV/vanille.png);
}
Enter fullscreen mode Exit fullscreen mode

香草形象
替代文本

2):before我们使用和:after以伪元素的形式创建2个副本，absolute positioning以便将它们一个接一个地放置。



    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 400px;
      height: 300px;
      clip: rect(0, 0, 0, 0);
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
Enter fullscreen mode Exit fullscreen mode

3）之后，对于每个伪元素，我们horizontal margins从原始坐标创建自己的伪元素。

我们还需要为每个伪元素指定我们自己的图像，这是一个使用允许过滤器修改的原始图像。

:before背景图像
替代文本

:after背景图像
替代文本

我们还需要将动画的名称添加@keyframes到我们将使用该属性进行动画处理的每个伪元素中clip。



    &::before {
      left: -6px;
      animation: glitch-effect 2s infinite linear alternate-reverse;
      background-image: url(https://rawcdn.githack.com/Kerthin/links/247cc9065bac7d5c23b45ff677bf1d2bceeb4324/img/glitch/imgTV/red.jpg);
    }
    &::after {
      left: 6px;
      animation: glitch-effect 3s infinite linear alternate-reverse;
      background-image: url(https://rawcdn.githack.com/Kerthin/links/247cc9065bac7d5c23b45ff677bf1d2bceeb4324/img/glitch/imgTV/blue.jpg);
    }
Enter fullscreen mode Exit fullscreen mode

4)现在我们可以使用之前clip在“文本故障动画”部分使用过的动画了previous post。不过，在属性值中，我们必须在和 中clip指定元素的大小（参见 item ）。.imgheightwidth№1



$steps: 17;

@keyframes glitch-effect{
    @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
            clip: rect(random(300) + px, 400px, random(300) + px, 0);
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

结果
替代文本

SVG

这里的想法大致相同，只是在这里我们不使用伪元素会更方便，而是简单地创建 3 个相同的 svg 元素。

HTML

我们创建一个公共容器并将 3 个 SVG 副本放入其中。



<div class="svgWrap">
    <svg class="svgWrap__text">
        <use xlink:href="#svgGlitch"></use>
    </svg>
    <svg class="svgWrap__text">
        <use xlink:href="#svgGlitch"></use>
    </svg>
    <svg class="svgWrap__text">
        <use xlink:href="#svgGlitch"></use>
    </svg>
</div>
Enter fullscreen mode Exit fullscreen mode

使用ID #svgGlitch，我们参考我们准备好的SVG template，以免连续 3 次复制整个 SVG 代码。

SVG模板



<svg id="svgGlitch" class="none" width="270" height="76" viewBox="0 0 270 76" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.84 38.288C0.84 49.488 4.376 58.48 11.448 65.264C18.52 72.048 27.64 75.44 38.808 75.44C45.048 75.44 50.536 74.224 55.272 71.792C60.04 69.328 63.64 66.56 66.072 63.488L61.176 59.552C58.936 62.624 55.944 65.04 52.2 66.8C48.488 68.56 44.28 69.44 39.576 69.44C30.392 69.44 23.176 66.4 17.928 60.32C12.712 54.24 10.072 46.512 10.008 37.136C9.944 27.888 12.408 20.656 17.4 15.44C22.392 10.192 29.256 7.568 37.992 7.568C41.288 7.568 44.584 8.032 47.88 8.96C51.208 9.888 53.976 11.232 56.184 12.992L61.032 7.376C58.088 5.328 54.584 3.76 50.52 2.672C46.456 1.584 42.248 1.04 37.896 1.04C27.112 1.04 18.232 4.656 11.256 11.888C4.312 19.12 0.84 27.92 0.84 38.288ZM48.312 47.216L57.864 48.896V65.648L66.072 63.488V48.896L72.36 47.216V42.416H48.312V47.216ZM53.016 10.4L55.896 24.032H61.368V2.62399H56.376L53.016 10.4ZM76.5855 74H100.106V70.16L92.5215 68.48L92.4255 48.704L92.5215 1.952L91.4175 0.463997L89.6415 0.367998L75.4335 1.99999V6.512L84.3615 7.952L84.4575 48.704L84.3615 68.48L76.5855 70.16V74ZM107.009 74H130.817V70.16L123.233 68.48L123.137 48.704L123.473 27.872L122.369 26H120.113L106.769 27.632V32.144L114.833 33.584L115.169 48.704L115.073 68.48L107.009 70.16V74ZM112.865 9.824C112.865 11.584 113.409 13.008 114.497 14.096C115.617 15.184 117.089 15.728 118.913 15.728C120.865 15.728 122.353 15.216 123.377 14.192C124.433 13.168 124.961 11.712 124.961 9.824C124.961 8.064 124.401 6.64 123.281 5.55199C122.193 4.464 120.737 3.92 118.913 3.92C116.961 3.92 115.457 4.432 114.401 5.456C113.377 6.48 112.865 7.936 112.865 9.824ZM134.737 32.144L142.561 32.72V48.704L142.225 66.176C142.225 69.056 142.737 71.152 143.761 72.464C144.817 73.744 146.577 74.384 149.041 74.384L160.225 72.608V68.768H153.409L151.057 66.032L150.625 48.704L151.441 19.28L149.857 17.36H147.601C146.545 19.344 145.073 21.488 143.185 23.792C141.329 26.096 138.513 27.696 134.737 28.592V32.144ZM148.801 32.144H161.329V27.248H148.993L148.801 32.144ZM166.385 51.2C166.385 58.304 168.577 64.064 172.961 68.48C177.377 72.864 182.913 75.056 189.569 75.056C195.265 75.056 199.665 74.048 202.769 72.032C205.873 69.984 208.177 67.952 209.681 65.936L207.233 63.056C205.473 64.688 203.457 66.064 201.185 67.184C198.913 68.272 196.113 68.816 192.785 68.816C187.793 68.816 183.585 67.136 180.161 63.776C176.769 60.384 175.057 55.872 175.025 50.24C174.993 43.68 176.385 38.72 179.201 35.36C182.017 31.968 185.377 30.272 189.281 30.272C192.193 30.272 194.657 30.944 196.673 32.288C198.689 33.6 199.841 35.2 200.129 37.088L205.937 31.184C204.177 29.168 201.921 27.632 199.169 26.576C196.417 25.488 193.121 24.944 189.281 24.944C183.137 24.944 177.777 27.472 173.201 32.528C168.657 37.584 166.385 43.808 166.385 51.2ZM199.313 33.2L201.377 42.944H206.129V25.904H201.761L199.313 33.2ZM215.617 74H237.217V70.16L230.593 68.48L230.497 48.704L230.593 1.904L229.249 0.367998H227.713L214.465 1.99999V6.512L222.433 7.952L222.529 48.704L222.433 68.48L215.617 70.16V74ZM230.353 39.44C231.985 36.912 234.113 35.024 236.737 33.776C239.393 32.496 242.001 31.856 244.561 31.856C247.601 31.856 249.937 32.736 251.569 34.496C253.201 36.224 254.017 38.144 254.017 40.256V48.704L253.921 68.48L246.337 70.16V74H269.185V70.16L262.081 68.48L261.841 48.704C261.841 48.704 261.873 47.568 261.937 45.296C262.033 43.024 262.081 40.704 262.081 38.336C262.081 34.176 260.833 30.912 258.337 28.544C255.873 26.144 252.177 24.944 247.249 24.944C243.345 24.944 239.633 26 236.113 28.112C232.625 30.224 230.161 32.864 228.721 36.032L230.353 39.44Z" />
</svg>
Enter fullscreen mode Exit fullscreen mode

CSS（SCSS）

1)首先，我们需要分别指定容器和每个 SVG 块的尺寸。最好使用原始尺寸。



.svgWrap {
    position: relative;
    width: 270px;
    height: 76px;
}
.svgWrap__text {
    position: absolute;
    top: 0;
    left: 0;
    fill: #fff;
    background: #000;
    width: 270px;
    height: 76px;
}
Enter fullscreen mode Exit fullscreen mode

2)进一步，类似图片所示，我们为每个元素设置单独的样式。但这次我们将使用 :nth-child 来分别访问每个子元素，而不是使用伪元素 :before 和 :after。



  &:nth-child(2),
  &:nth-child(3) {
    clip: rect(0, 0, 0, 0); 
  }
  &:nth-child(2) {
    fill: #fffafa;
    left: -2px;
    animation: svg-glitch-effect 2s infinite linear alternate-reverse;
  }
  &:nth-child(3) {
    fill: #f5f5f5;
    left: 2px;
    animation: svg-glitch-effect 3s infinite linear alternate-reverse;
  }
Enter fullscreen mode Exit fullscreen mode

对于 SVG，我们不指定不同的图像，而是使用fill属性指定不同的颜色。

3）我们按照相同的原则制作动画：就像图像一样。我们指定所需width的height元素。



$steps: 20;

@keyframes svg-glitch-effect{
    @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
            clip: rect(random(75) + px, 270px, random(75) + px, 0);
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

结果
替代文本

结束

好了，就是这样。有些人可能会问，既然这些 Glitch 动画的实现方式彼此之间差别不大，为什么不直接在上一篇文章中详细说明呢？或者为什么不直接用这些信息补充上一篇文章呢？

我会诚实地回答，我太懒了。
替代文本

我建议您订阅我的Twitter，我也在那里发布我的作品。

文章来源：https://dev.to/kerthin/how-to-create-pure-css-glitch-animation-for-images-and-svg-ojl
Devto 翻译
PREV
Docker 初学者备忘单 🐳 Docker #CheatSheet #Containers #DevOps
NEXT
🧑‍💻 我如何在一个月内开发我的投资组合🗓 + 演示🍿 完整投资组合演示介绍设计技术主页主页 CodePen 演示：我的天哪投资组合页面最后的润色响应式总结结果结束完整投资组合演示