关于前端:利用-clippath-实现动态区域裁剪

背景

明天逛 CodePen，看到了这样一个十分有意思的成果：

CodePen Demo — Material Design Menu By Bennett Feely

这个成果还是有一些值得探讨学习的点，上面咱们一起来看看。

如何实现这样一个相似的成果？

首先，想一想，如果让你去实现下面的成果，你会怎么做呢？

这里我简略列举一些可能的方法：

1. 暗影 box-shadow
2. 突变 radial-gradient
3. 缩放 transform: scale()

疾速的一个一个过一下。

应用 box-shadow 实现

如果应用 box-shadow，代码大抵如下：

<div class="g-container">
    <div class="g-item"></div>
</div>

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}

.g-item {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    top: 20px;
    left: 20px;
    box-shadow: 0 0 0 0 #fff;
    transition: box-shadow .3s linear;
    
    &:hover {box-shadow: 0 0 0 420px #fff;}
}

外围就在于：

1. 外层一个设置了 overflow: hideen 的遮罩
2. 内层元素 hover 的时候，实现一个 box-shadow: 0 0 0 0 #fff 到 box-shadow: 0 0 0 420px #fff 的变动

成果如下：

整体的动画是模仿进去了，然而它最致命的问题有两个：

1. 当咱们的鼠标来到圆形的时候，整个动画就开始反向进行了，红色区域开始隐没，如果咱们要进行按钮操作，是无奈实现的
2. 暗藏在动画开展后的矩形内的元素，不容易搁置

所以，box-shadow 看着虽好，然而只能放弃。上述 Demo 的代码 — CodePen Demo — box-shadow zoom in animation

应用突变 radial-gradient 实现

上面咱们应用径向突变 radial-gradient 加上 CSS @property，也能够还原上述成果：

<div class="g-container"></div>

@property --size {
  syntax: '<length>';
  inherits: false;
  initial-value: 24px;
}

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    background: radial-gradient(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
    transition: --size .3s linear;
    
    &:hover {--size: 450px;}
}

咱们通过管制径向突变的动画成果，在 hover 的时候，让本来只是一个小圆背景，变成一个大圆背景，成果如下：

emmm，成果的确是还原了，问题也很致命：

1. 因为是背景的变动，所以鼠标不须要 hover 到小圆上，只须要进入 div 的范畴，动画就会开始，这显然是不对的
2. 和第一种 box-shadow 的办法相似，暗藏在红色之下的导航元素的 DOM 不好搁置

上述 Demo 的代码 — CodePen Demo — radial-gradient zoom in animation

emmm，还有一种办法，通过缩放 transform: scale()，也会存肯定问题，这里不持续开展。

所以到这里，想实现上述的成果，外围在于：

1. 鼠标要 hover 到圆上，能力开始动画，并且，鼠标能够在开展后的范畴内自在挪动，且不会发出动画成果
2. 动画开展后，外面的 DOM 的搁置，不能太麻烦，能不借助 Javascript 去管制外面内容的显示暗藏最好

利用 clip-path 实现动静区域裁剪

所以，这里，咱们其实是须要一个 动静的区域裁剪。

在我的这篇文章中 — 如何不应用 overflow: hidden 实现 overflow: hidden？，介绍了 CSS 中几种裁剪元素的形式，而其中，最适宜利用在这个成果的，就是 — clip-path。

利用 clip-path，能够十分好的实现，动静裁剪的性能，并且，代码也非常简单：

<div class="g-container"></div>

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    transition: clip-path .3s linear;
    clip-path: circle(20px at 44px 44px);
    background: #fff;
    
    &:hover {clip-path: circle(460px at 44px 44px);
    }
}

咱们只须要利用 clip-path，在最开始的时候，将一个矩形 div，利用 clip-path: circle(20px at 44px 44px) 裁剪成一个圆，当 hover 的时候，扩充裁剪圆的半径到整个矩形范畴即可。

成果如下：

这样，咱们就能完满的实现题图的成果，并且，内置的 DOM 元素，间接写进这个 div 外部即可。

<div class="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

成果如下：

CodePen Demo — clip-path zoom in animation

很有意思的一个技巧，利用 clip-path 实现动静区域裁剪，心愿大家可能把握。

最初

好了，本文到此结束，心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。