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

    clip实现线条动画

    动画实现原理

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

    真实变幻情况如下:

    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中的是不一样的:

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

    clip-path实现线条动画

    clip-path inset 中round

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

    clip-path inset 圆角动画

    回到顶部
    我要评论

    所有评论

      相关文章