clip和clip-path inset都是矩形剪裁,但是又有所不同,今天一起来看看。首先来看一个clip实现的线条动画:

动画实现原理

动画的主要原理其实就是在4个角的剪切矩形的变换:

background Layer 1 clip:rect1 clip:rect2 clip:rect3 clip:rect4

真实变幻情况如下:

clip和clip-path inset

clip是老式的剪裁,必须要absolute或者fixed定位的元素才能使用,并且只能剪裁正方形。一般用法为clip:rect(top,right,bottom,left)。

clip-path是新的剪裁,对元素的定位没有要求,而且也可以剪裁更多的形状,例如circle,ellipsis,polygon等,其中inset是矩形剪裁,和clip的rect类似。inset常见用法为clip-path:inset(top,right,bottom,left)

上面的线条动画用clip和clip-path的inset都是可以实现的,但是需要注意的是clip:rect中的上,右,下,左和clip-path inset中的是不一样的:

background Layer 1 top right bottom left clip:rect剪裁区域 clip:rect(top,right,bottom,left) top left clip-path:inset剪裁区域 clip-path:inset(top,right,bottom,left) right bottom

也就是说clip:rect实现的,用clip-path:inset也可以实现,只不过right和bottom不太一样,现在看看clip-path:inset版的上述demo:

clip-path inset 中round

clip-path 中的inset除了又top,right,bottom,left外,还有一个round,后面接四个参数,表示剪切矩形的四个圆角。下面就是一个简单的inset round圆角动画,原理就是hover的时候设置不同的圆角。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字