CSS3clip-path怎么使用
这篇文章主要介绍“CSS3 clip-path怎么使用”，在日常操作中，相信很多人在CSS3 clip-path怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3 clip-path怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联公司于2013年开始，先为确山等服务建站，确山等地企业，进行企业商务咨询服务。为确山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
今天逛 CodePen，看到了这样一个非常有意思的效果：
CodePen Demo -- Material Design Menu By Bennett Feely
网址：https://codepen.io/bennettfeely/pen/fHdFb
这个效果还是有一些值得探讨学习的点，下面我们一起来看看。
如何实现这样一个类似的效果？
首先，想一想，如果让你去实现上面的效果，你会怎么做呢？
这里我简单罗列一些可能的办法：
阴影 box-shadow
渐变 radial-gradient
缩放 transform: scale()
快速的一个一个过一下。
使用 box-shadow 实现
如果使用 box-shadow，代码大致如下：
.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;
}
}核心就在于：
效果如下：
整体的动画是模拟出来了，但是它最致命的问题有两个：
所以，box-shadow 看着虽好，但是只能放弃。
上述 Demo 的代码 -- CodePen Demo -- box-shadow zoom in animation
网址：https://codepen.io/Chokcoco/pen/jOLRQNy
使用渐变 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(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
transition: --size .3s linear;
&:hover {
--size: 450px;
}
}我们通过控制径向渐变的动画效果，在 hover 的时候，让原本只是一个小圆背景，变成一个大圆背景，效果如下：
emmm，效果确实是还原了，问题也很致命：
上述 Demo 的代码 -- CodePen Demo -- radial-gradient zoom in animation
网址：https://codepen.io/Chokcoco/pen/RwZOqWb
emmm，还有一种方法，通过缩放 transform: scale()，也会存一定问题，这里不继续展开。
所以到这里，想实现上述的效果，核心在于：
利用 clip-path 实现动态区域裁剪
所以，这里，我们其实是需要一个动态的区域裁剪。
在我的这篇文章中 -- 如何不使用 overflow: hidden 实现 overflow: hidden？，介绍了 CSS 中几种裁剪元素的方式，而其中，最适合利用在这个效果的，就是 -- clip-path。
利用 clip-path，可以非常好的实现，动态裁剪的功能，并且，代码也非常简单：
.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 内部即可。
到此，关于“CSS3 clip-path怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
