Вырезать часть изображения CSS

Question

Я пытаюсь создать эффект анимации glitch изображения.

Я использую слои с режимами смешивания и обрезки контуров.
А как я могу вырезать часть основного изображения?

Так как я хочу добиться эффекта смещения кусочка картинки, то основным фоном тоже может быть изображение, поэтому я не могу использовать цвет фона в слоях.

<div class="glitch-image">
  <img class="glitch-image__image" src="https://clipart-db.ru/file_content/rastr/bmw_002.png" alt=""/>
  <div class="glitch-image__glitch" style="background-image: url(https://clipart-db.ru/file_content/rastr/bmw_002.png)" alt="">
  </div>
</div>

CSS

@keyframes glitch-anim-1 {
    0% {
        clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
    }
    10% {
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    20% {
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    30% {
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    40% {
        clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
    }
    50% {
        clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
    }
    60% {
        clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
    }
    70% {
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    80% {
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    90% {
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    100% {
        clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
    }
}

JS

function random_polygon() {
  
}

_{Свободный перевод вопроса Cut part of image CSS от участника @Евгений Венеград.}

Answer 1

Если вас интересует другая идея, вот еще одна без JS, только несколько строк CSS и с прозрачностью:

.box {
  width:400px;
  height:200px;
  margin:auto;
  background-image:url(https://clipart-db.ru/file_content/rastr/bmw_002.png);
  background-size:0 0;
  position:relative;
  display:grid;
} 
.box::before,
.box::after {
  content:"";
  grid-area:1/1;   
  background-image:inherit;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  -webkit-mask-size: 100% 20px,100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: glitch 1s infinite;
}
.box::after {
  -webkit-mask-image: linear-gradient(#000 0 0);
  animation:
    glitch 1s  infinite,
    m  .2s infinite cubic-bezier(0.5,200,0.5,-200);
}

@keyframes glitch{
  0%   {-webkit-mask-position:0 20px,0 0}
  20%  {-webkit-mask-position:0 50% ,0 0}
  40%  {-webkit-mask-position:0 100%,0 0}
  60%  {-webkit-mask-position:0 3px ,0 0}
  80%  {-webkit-mask-position:0 70%,0 0}
  100% {-webkit-mask-position:0 0  ,0 0}
}
@keyframes m{
  100% {transform:translate(0.1px)} 
}

body {
 background:linear-gradient(90deg,yellow,lightblue);
}

<div class="box">
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Обдумайте использование SVG filters feTurbulence и feDisplacementMap

При изменении значений attributeName="baseFrequency" можно получить требуемый эффект:

.container {
width:60%;
height:60%;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"   viewBox="0 0 500 350" >
  <defs>
    <filter id="myFilter" >
      <feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
     <animate attributeName="baseFrequency" dur="30s" values="0.0001;0.02;0.0001;0.02;0.0001"  />
      </feTurbulence>
     <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
    </filter>
  </defs>
<image id="img1" x="-12" xlink:href="https://i.stack.imgur.com/Y6Rh9.jpg" width="100%" height="100%" filter="url(#myFilter)" /> 
  </svg>
</div>

Тот же эффект при наведении курсора

begin="img1.mouseover" end="img1.mouseout"

.container {
width:60%;
height:60%;
cursor:pointer;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"   viewBox="0 0 500 350">
  <defs>
    <filter id="myFilter" >
      <feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
     <animate attributeName="baseFrequency" dur="18s" values="0.0001;0.02;0.0001;0.02;0.0001" begin="img1.mouseover" end="img1.mouseout" />
      </feTurbulence>
     <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
    </filter>
  </defs>
<image id="img1" x="-12" xlink:href="https://i.stack.imgur.com/Y6Rh9.jpg" width="100%" height="100%" filter="url(#myFilter)" /> 
  </svg>
</div>

Update

Если поиграть значениями атрибутов baseFrequency и scale="15", то можно получить другие интересные эффекты:

.container {
width:60%;
height:60%;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"   viewBox="0 0 500 350"  >
  <defs>
    <filter id="myFilter" >
      <feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
     <animate attributeName="baseFrequency" dur="30s" values="0.0001;0.25;0.25;0.0001;0.25;0.0001;0.0001"  />
      </feTurbulence>
     <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="15" in="SourceGraphic" in2="turbulence" />
    </filter>
  </defs>
<image id="img1" x="-12" xlink:href="https://i.stack.imgur.com/Y6Rh9.jpg" width="100%" height="100%" filter="url(#myFilter)" style="overflow:hidden1;" /> 
  </svg>
</div>

_{Свободный перевод ответа от участника @Alexandr_TT.}

БЛОГ НА HUSL

Вырезать часть изображения CSS

Ответы (2 шт):