css3animate擦除效果

要实现CSS3的擦除效果，可以使用clip-path属性和animation来实现。具体实现步骤如下：

1.创建一个div元素，并设置背景图片。

2.使用clip-path属性将div元素剪裁成一个矩形。

3.使用animation来实现擦除的动画效果。

下面是一个简单的示例代码：

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

<style>
.box {
  width: 200px;
  height: 200px;
  background-image: url("your-image.jpg");
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: erase 2s forwards;
}

@keyframes erase {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
</style>

在上面的代码中，我们首先创建了一个名为box的div元素，并设置了它的宽度、高度和背景图片。

然后，我们使用clip-path属性将div元素剪裁成了一个矩形。clip-path属性中的polygon函数用于定义一个多边形，这里我们定义了一个包含四个点的矩形。

最后，我们使用animation来实现擦除的动画效果。在animation中，我们定义了一个名为erase的动画，它包含了两个关键帧，分别是0%和100%。在0%的关键帧中，我们将clip-path设置为了一个只包含左侧边框和底部边框的矩形，实现了擦除的起始效果。在100%的关键帧中，我们将clip-path设置为了一个完整的矩形，实现了擦除的结束效果。通过animation的forwards属性，我们保持了动画结束时的状态。

这样，我们就实现了一个简单的CSS3擦除效果。