剪切部分图像 CSS

Question

我正在尝试创建一个故障图像动画效果。

我使用具有混合混合模式和剪辑路径的图层。但是如何剪切部分主图像？

因为我想达到置换一张图片的效果。主背景也可以是图像，这就是为什么我不能在图层中使用背景颜色。

<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

body
  display flex
  background-color #000
  min-height 70vh
  box-sizing: border-box
  *
    box-sizing: border-box


.glitch-image
  width 100%
  max-width 500px
  margin auto
  position relative
  &__image
    max-width 100%
    position relative
    z-index 1
    display block
    vertical-align top
    filter: drop-shadow(0px 15px 15px #fff);
  &__glitch
    position absolute
    left 40px
    top 0
    bottom 0
    right 0
    width 100%
    height 100%
    background-size 100%
    background-repeat no-repeat
    z-index 2
    // animation: glitch-anim-1 2s infinite linear alternate;
    clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
    filter: sepia(1) hue-rotate(303deg) brightness(100%) saturate(200%) drop-shadow(5px 5px 25px red);


@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%);
    }
}

function random_polygon() {
  
}

See code pen

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>

Answer 2

我正在尝试创建一个故障图像动画效果。

考虑使用 SVG 滤镜：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>

更新

如果你玩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>