clip-path的学习和简单使用

遇到一个情况，图片太长需要截短一些，开始用了clip，后来发现这个属性已经从CSS标准里面删除了，然后看到了clip-path，发现这个比较强大一些。
我用的图片的大小是600*774

clip-path裁剪出圆形

      clip-path:circle(40% at 200px 200px);

效果如下：

40%是半径，at后面的参数是圆心。

clip-path 裁剪出椭圆

      clip-path: ellipse(farthest-side farthest-side);

效果如下：

ellipse也可以指定裁剪的参数，但是我还不知道怎么用，知道了再上来补上。

clip-path裁剪出矩形

inset的四个参数的的含义如下图：

就是画了四条线，四条线框出来的矩形可以显示，外面的就不显示了。四个参数分别是上面的线距离图片的上边的距离，右面的线距离图片右边的距离，下面的线距离图片下边的距离，左边的线距离图片左边的距离。

我想实现高度剪成600px,

      clip-path: inset(0 0 calc(100% - 600px) 0);

用calc的好处是我不需要自己再计算了，比较通用。

clip-path实现文字慢慢从上到下展示出来的效果

突发奇想实现的，通过不断改变inset的第三个参数来实现，效果图如下：

屏幕录制做成gif用了个软件叫做ScreenToGif。
先介绍一下这首词吧，我第一次见到的时候是看金庸的《倚天屠龙记》，开篇就是这首词，作者是丘处机，描写小龙女的。
代码如下：

<p>
  春游浩荡，是年年、寒食梨花时节。
  <br>
  白锦无纹香烂漫，玉树琼葩堆雪。
  <br>
  静夜沉沉，浮光霭霭，冷浸溶溶月。
  <br>
  人间天上，烂银霞照通彻。
  <br>
  浑似姑射真人，天姿灵秀，意气舒高洁。
  <br>
  万化参差谁信道，不与群芳同列。
  <br>
  浩气清英，仙才卓荦，下土难分别。
  <br>
  瑶台归去，洞天方看清绝。
</p>

css代码：

 p {
       /*初始的css*/
      clip-path: inset(0 0 100% 0);
    }

js代码如下：

const pp = document.querySelector('p');
  let percent = 0;

  function go() {
    pp.style.clipPath = `inset(0 0 calc(100% - ${percent}%) 0)`;
    percent++;
    if (percent == 101) {
      return;
    }
    requestAnimationFrame(go);
  }

  setTimeout(() => requestAnimationFrame(go)
    //加定时器是为了录制视频方便
    , 2000);

clip-path还有更加高级的用法，比如多边形，配合svg等等。。。