背景

明天逛 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 订阅珍藏。

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