利用 clip-path 实现自定义进度条以及图片擦除特效

前言

最近在做游戏官网，遇到了几个动画的实现，特地在此记录下来，以供我之后参考

自定义进度条

现在产品要做进度条功能，设计抛出了一张图片，假设长成这样：

首先来分析一下进度条功能，需要根据进度来显示不同的宽度。那我们的第一反应肯定是通过 js 来改变图片的宽度，那我们来试一下：你会发现随着图片宽度的改变，图片也跟着变形来，这和进度条的需求不符合。

<html>
    <img
        src="https://person-pic-1253385403.cos.ap-shanghai.myqcloud.com/img/%E4%BA%AE.png"
        class="img"
    />
</html>
<style>
    .img {
      width: 1607px;
      height: 11px;
    }
</style>

这里我们可以曲线来达成这个功能，不改变进度条的宽度，而是将宽度遮盖起来，这里可以用到 css 的 clip-path，请看栗子：

这里设置为了 1000px 当然你也可以设置其他值来达到想要的效果。

<html>
    <img
        src="https://person-pic-1253385403.cos.ap-shanghai.myqcloud.com/img/%E4%BA%AE.png"
        class="img"
    />
</html>
<style>
    .img {
      width: 1607px;
      height: 11px;
      clip-path: inset(0px 1000px 0px 0px);
    }
</style>

擦除特效（类似 ppt）

<html>
    <img
        src="https://person-pic-1253385403.cos.ap-shanghai.myqcloud.com/img/20211018150604.png"
        class="anaimate"
    />
</html>
<style>
    .anaimate {
      animation: animation 1s ease-in 0s 1 normal both;
    }
    @keyframes animation {
      0% {
        opacity: 1;
        clip-path: inset(0px 0px 0px 0px);
      }
      100% {
        opacity: 0;
        clip-path: inset(100% 0px 0px 0px);
      }
    }
</style>