遇到一个情况,图片太长需要截短一些,开始用了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等等。。。