<div class="camouflage"></div>

body {
  margin:0;
  background:lightblue
}

.camouflage {
  height:100vh;
  cursor:pointer;
  display:grid;
  background:
      repeating-linear-gradient(135deg,#3b3c34 0 30px,#5f5137 0 60px,#5d6b48 0 90px,#9a906c 0 120px) top no-repeat;
}
.camouflage:before {
  content:"";
  grid-area:1/1;
  background:repeating-linear-gradient(135deg,#3b3c34 0 30px,#5f5137 0 60px,#5d6b48 0 90px,#9a906c 0 120px);
  -webkit-mask:
    radial-gradient(farthest-side at top left,#0000 98%,red ) calc(50% - 30px) 105%/60px 150px,
    radial-gradient(farthest-side at top right,#0000 98%,red ) calc(50% + 30px) 105%/60px 150px,
    radial-gradient(farthest-side,red 98%,#0000 ) calc(50% - 60px) calc(100% - 80px)/30px 40px,
    radial-gradient(farthest-side,red 98%,#0000 ) calc(50% + 60px) calc(100% - 80px)/30px 40px,
    radial-gradient(farthest-side,red 98%,#0000 ) 50% calc(100% - 50px)/120px 100px;
  -webkit-mask-repeat:no-repeat;
}
.camouflage:after {
  content:"";
  grid-area:1/1;
  z-index:1;
  opacity:0;
  margin:auto auto 90px;
  width:90px;
  height:30px;
  background:
    radial-gradient(circle closest-side,#000 40%,#0000 0) 0 0/50% 100%,
    radial-gradient(circle closest-side,#fff 98%,#0000) 0 0/50% 100%;
}
.camouflage:hover {
  animation:a 4s forwards;
}
.camouflage:hover::after {
  animation:s 4s forwards;
}

@keyframes a {
  0%,10% {background-size:100% 100%}
  30%,100% {background-size:100% 0%}
}

@keyframes s {
  0%,20% {opacity:0;background-position:0 0,0 0}
  30% {opacity:1;background-position:0 0,0 0}
  40%,50% {opacity:1;background-position:5px 0,0 0}
  60%,70% {opacity:1;background-position:-5px 0,0 0}
  80%,100% {opacity:1;background-position:0 0,0 0}
}