使用Clip-path实现动态区域裁剪

时间：2023-03-13 05:58:44 科技观察

背景今天访问CodePen，看到了这样一个很有意思的效果：CodePenDemo--MaterialDesignMenuByBennettFeely[1]这个效果还有一些值得探索和学习的地方，如下，一起来看看吧。如何实现这种类似的效果？首先想一想，如果让你达到上面的效果，你会怎么做？这里我简单罗列一些可能的方法：shadowbox-shadowgradientradial-gradientzoomtransform:scale()快速一一过一遍。使用box-shadow实现如果使用box-shadow，代码大致如下：

.g-container{位置：相对;宽度：400px；高度：300px；溢出：隐藏；}.g-item{位置：绝对；宽度：48px；高度：48px；边框半径：50%；背景：#fff；顶部：20px；左：20px；box-shadow:0000#fff;transition:box-shadow.3slinear;&:hover{box-shadow:000420px#fff;}}核心是：一个外层带overflow:hideenmaskinnerelementhover的时候，从box-shadow:0000#fff改为box-shadow:000420px#fff的效果如下：整体动画是模拟出来的，但是有两个最致命的问题：当我们鼠标离开的时候圆圈，整个动画开始反转，白色区域开始消失。如果我们要进行按钮操作，是不可能完成动画展开后隐藏在矩形中的元素的。所以，box-shadow看着不错，但也只能放弃了。上面Demo--CodePenDemo--box-shadowzoominanimation[2]的代码使用了渐变radial-gradient实现如下。我们使用径向渐变radial-gradient加上CSS@property来还原上面的效果：

@property--size{syntax:'';inherits:false;initial-value:24px;}.g-container{position:relative;width:400px;height:300px;overflow:hidden;background:radial-gradient(circleat44px44px,#fff0,#fffvar(--size),transparentvar(--size),transparent0);transition:--size.3slinear;&:hover{--size:450px;}}通过控制径向渐变的动画效果，悬停时，原来的小圆背景变成大圆背景。效果如下：emmm，效果确实还原了，问题也很致命：就是背景的变化，所以鼠标不需要悬停到小圆圈，只需要进入范围即可div，动画将开始。这显然是错误的。和第一种box-shadow方法类似，隐藏在白色下的导航元素的DOM不容易放置上面Demo的代码--CodePenDemo--radial-gradientzoominanimation[3]emmm,有另一种方法，通过缩放transform:scale()，会存在一定的问题，这里不再继续展开。所以这里，如果要实现上面的效果，核心是：鼠标必须悬停在圆上才能开始动画，并且鼠标可以在展开的范围内自由移动，不会收回动画效果动画展开后，DOMinside放置应该不会太麻烦。如果不用Javascript就能控制内容的显示和隐藏，最好使用clip-path来实现动态区域裁剪。所以，在这里，我们实际上需要一个动态区域裁剪。在我的文章--如何实现溢出：隐藏而不使用溢出：隐藏？[4]，我介绍了几种CSS中裁剪元素的方式，其中最适合使用这种效果的是--clip-path。使用clip-path可以很好的实现动态裁剪的功能，代码也很简单：