剪切图像 CSS 的一部分

叶夫根尼·维内格勒

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

我使用具有混合混合模式和剪辑路径的图层。但是我怎样才能剪切主图像的一部分？

由于我想实现置换一张图片的效果。主背景也可以是图像，这就是我不能在图层中使用背景颜色的原因。

<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() {
  
}

见码笔

陪伴阿菲

如果你对一个不同的想法感兴趣，这里是另一个没有 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);
}