CSS3 clip-path怎么使用

这篇文章主要介绍“CSS3 clip-path怎么使用”，在日常操作中，相信很多人在CSS3 clip-path怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3 clip-path怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！今天逛 CodePen，看到了这样一个非常有意思的效果：CodePen Demo — Material Design Menu By Bennett Feely网址：https://codepen.io/bennettfeely/pen/fHdFb这个效果还是有一些值得探讨学习的点，下面我们一起来看看。首先，想一想，如果让你去实现上面的效果，你会怎么做呢？这里我简单罗列一些可能的办法：阴影 box-shadow渐变 radial-gradient缩放 transform: scale()快速的一个一个过一下。如果使用 box-shadow，代码大致如下：核心就在于：外层一个设置了 overflow: hideen 的遮罩内层元素 hover 的时候，实现一个 box-shadow: 0 0 0 0 #fff 到 box-shadow: 0 0 0 420px #fff 的变化效果如下：整体的动画是模拟出来了，但是它最致命的问题有两个：当我们的鼠标离开圆形的时候，整个动画就开始反向进行了，白色区域开始消失，如果我们要进行按钮操作，是无法完成的隐藏在动画展开后的矩形内的元素，不容易放置所以，box-shadow 看着虽好，但是只能放弃。上述 Demo 的代码 — CodePen Demo — box-shadow zoom in animation网址：https://codepen.io/Chokcoco/pen/jOLRQNy下面我们使用径向渐变 radial-gradient 加上 CSS @property，也可以还原上述效果：我们通过控制径向渐变的动画效果，在 hover 的时候，让原本只是一个小圆背景，变成一个大圆背景，效果如下：emmm，效果确实是还原了，问题也很致命：由于是背景的变化，所以鼠标不免费云主机、域名需要 hover 到小圆上，只需要进入 div 的范围，动画就会开始，这显然是不对的和第一种 box-shadow 的方法类似，隐藏在白色之下的导航元素的 DOM 不好放置上述 Demo 的代码 — CodePen Demo — radial-gradient zoom in animation网址：https://codepen.io/Chokcoco/pen/RwZOqWbemmm，还有一种方法，通过缩放 transform: scale()，也会存一定问题，这里不继续展开。所以到这里，想实现上述的效果，核心在于：鼠标要 hover 到圆上，才能开始动画，并且，鼠标可以在展开后的范围内自由移动，且不会收回动画效果动画展开后，里面的 DOM 的放置，不能太麻烦，能不借助 Javascript 去控制里面内容的显示隐藏最好所以，这里，我们其实是需要一个动态的区域裁剪。在我的这篇文章中 — 如何不使用 overflow: hidden 实现 overflow: hidden？，介绍了 CSS 中几种裁剪元素的方式，而其中，最适合利用在这个效果的，就是 — clip-path。利用 clip-path，可以非常好的实现，动态裁剪的功能，并且，代码也非常简单：我们只需要利用 clip-path，在最开始的时候，将一个矩形 div，利用 clip-path: circle(20px at 44px 44px) 裁剪成一个圆，当 hover 的时候，扩大裁剪圆的半径到整个矩形范围即可。效果如下：这样，我们就能完美的实现题图的效果，并且，内置的 DOM 元素，直接写进这个 div 内部即可。效果如下：CodePen Demo — clip-path zoom in animation网址：https://codepen.io/Chokcoco/pen/yLorrRm到此，关于“CSS3 clip-path怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: 如何理解Node.js模块化

本篇内容主要讲解“如何理解Node.js模块化”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何理解Node.js模块化”吧!正文在Node.js中，内置了两个模块来进行模块化管理，这两个模块也是两个我们非常熟悉的…