SVG&Canvas Notes5:镂空效果

Demo1

• CSS mask遮罩

Demo2

效果图

代码

<div class="imgdemo">
        <h1 style="color: red">Animated mask-image is a thing</h1>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/sponge.jpg" />
        <h2 style="color: red"> Neat huh?</h2>
</div>


.imgdemo img {
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/spongebob.gif);
  mask-size: contain;
  mask-repeat: no-repeat;
  max-width: 100%;
}

// unrelated styles below - feel free to steal the checkerboard mixin
@mixin checker($c1, $c2, $size) {
  background-image: linear-gradient(45deg, $c1 25%, $c2 25%),
    linear-gradient(-45deg, $c1 25%, $c2 25%),
    linear-gradient(45deg, $c2 75%, $c1 75%),
    linear-gradient(-45deg, $c2 75%, $c1 75%);
  background-size: $size*2 $size*2;
  background-position: 0 0,
  0 $size,
  $size -#{$size},
  -#{$size} 0;
}

.imgdemo {
  padding: 40px;
  text-align: center;
  font-family: monospace;
  @include checker(darken(white, 8), transparent, 10px);
}