剪辑路径插入圆圈？

Question

是否可以创建一个嵌入的圆形剪辑路径，以便剪辑路径有效地在中心的 div 中切出一个洞，而不是只显示中心？

除了在中心切出的一个孔之外，所有的 div 都应该显示出来，以创建类似这样的东西：

我想使用剪辑路径或类似的东西，这样我就可以在 div 后面有东西（图像和内容），并且剪辑路径将用于显示这一点。因此 div（我的 jsfiddle 中的蓝色 div）将从中心消失，使用过渡显示其背后的内容。

div {
  background: blue;
  width: 200px;
  height: 200px;
  -webkit-clip-path: circle(50px at center);
}

<div></div>

https://jsfiddle.net/pm4yvbxn/

Answer 1

您可以通过在<div> 中添加元素来实现。

我用过<span>。这是代码

HTML

<div>
  <span></span>
</div>

CSS

div{
  background: blue;
  width: 200px;
  height: 200px;
  -webkit-clip-path: circle(50px at center);
  position:relative;
}
div span{
  position:absolute;
  display:block;
  width:30px;
  height:30px;
  border-radius:100%;
  background:#fff;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

示例：https://jsfiddle.net/pm4yvbxn/2/

您也可以在 div 中使用border-radius 来实现圆角边框。

Answer 2

我认为您无法使用clip-path 实现此目的，但您当然可以使用radial-gradient 背景图像在div 上切一个洞。这也比clip-path 有更好的浏览器支持。

注意：这种方法（和box-shadow）仅在覆盖下面内容的元素具有彩色填充时才有效。如果不是sandybrown 颜色，而是需要在顶部有另一个图像，那么这些方法将不起作用，因为它们实际上并没有挖洞，它们只是模仿这种效果。

.div-with-hole {
  height: 100vh;
  background: radial-gradient(circle at center, transparent 25%, sandybrown 25.5%);
  background-size: 100% 100%;
  background-position: 50% 50%;
  transition: all 2s ease;
}
.div-with-hole:hover {
  background-size: 400% 400%; /* should be 100% * (100 / transparent % of radial gradient */
}
body {
  background: url(http://lorempixel.com/800/800/nature/1);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

<div class='div-with-hole'></div>

Answer 3

您也可以在 :after 伪元素上使用 box-shadow 来做到这一点

div {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  background: url('http://planetcompas.com/live/wp-content/uploads/2013/04/2015-01-Beautiful-Planet-And-Space-4-Cool-Wallpapers-HD.jpg');
  background-size: cover;
  background-position: center;
}
div:after {
  width: 50px;
  height: 50px;
  content: '';
  border-radius: 50%;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 0px 300px lightblue;
  transition: all 0.3s linear;
}
div:hover:after {
  opacity: 0;
}

<div></div>

Answer 4

mask 可以做到这一点，它适用于任何类型的背景：

div {
  background: linear-gradient(blue,red);
  width: 200px;
  height: 200px;
  -webkit-mask:radial-gradient(circle 50px,transparent 98%,#fff 100%);
          mask:radial-gradient(circle 50px,transparent 98%,#fff 100%);
}

<div></div>

也可以动画化：

div {
  background: linear-gradient(blue,red);
  width: 200px;
  height: 200px;
  -webkit-mask:
    radial-gradient(farthest-side,#fff 98%,transparent 100%) center/50px 50px no-repeat,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
   
  mask:
    radial-gradient(farthest-side,#fff 98%,transparent 100%) center/50px 50px no-repeat,
    linear-gradient(#fff,#fff);
  mask-composite:exclude;
  transition:0.5s;
}
div:hover {
  -webkit-mask-size:290px 290px,auto;
          mask-size:290px 290px,auto;
}

<div></div>

Answer 5

您可以使用这种方法在clip-path 中创建孔：

let precision = 64;
let radius = 25;
let c = [...Array(precision)].map((_, i) => {
  let a = -i/(precision-1)*Math.PI*2;
  let x = Math.cos(a)*radius + 50;
  let y = Math.sin(a)*radius + 50;
  return `${x}% ${y}%`
})

document.querySelector('div').style.clipPath = 
 `polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${c.join(',')})`;

div {
  background: blue;
  width: 200px;
  height: 200px;
}

<div></div>

或简单地使用生成的剪辑字符串：

div {
      background: blue;
      width: 200px;
      height: 200px;
    }

<div style="clip-path: polygon(100% 50%, 100% 100%, 0px 100%, 0px 0px, 100% 0px, 100% 50%, 75% 50%, 74.8758% 47.5108%, 74.5043% 45.0463%, 73.8893% 42.6311%, 73.0369% 40.2891%, 71.9555% 38.0437%, 70.656% 35.917%, 69.1511% 33.9303%, 67.4559% 32.1033%, 65.5872% 30.4542%, 63.5637% 28.9994%, 61.4053% 27.7532%, 59.1335% 26.7282%, 56.771% 25.9344%, 54.3412% 25.3798%, 51.8683% 25.0699%, 49.3767% 25.0078%, 46.8914% 25.194%, 44.437% 25.6268%, 42.0378% 26.3018%, 39.7178% 27.2124%, 37.5% 28.3494%, 35.4064% 29.7015%, 33.4579% 31.2555%, 31.6737% 32.9957%, 30.0717% 34.9049%, 28.6677% 36.9641%, 27.4758% 39.1529%, 26.5077% 41.4495%, 25.7731% 43.8311%, 25.2792% 46.2739%, 25.0311% 48.7539%, 25.0311% 51.2461%, 25.2792% 53.7261%, 25.7731% 56.1689%, 26.5077% 58.5505%, 27.4758% 60.8471%, 28.6677% 63.0359%, 30.0717% 65.0951%, 31.6737% 67.0043%, 33.4579% 68.7445%, 35.4064% 70.2985%, 37.5% 71.6506%, 39.7178% 72.7876%, 42.0378% 73.6982%, 44.437% 74.3732%, 46.8914% 74.806%, 49.3767% 74.9922%, 51.8683% 74.9301%, 54.3412% 74.6202%, 56.771% 74.0656%, 59.1335% 73.2718%, 61.4053% 72.2468%, 63.5637% 71.0006%, 65.5872% 69.5458%, 67.4559% 67.8967%, 69.1511% 66.0697%, 70.656% 64.083%, 71.9555% 61.9563%, 73.0369% 59.7109%, 73.8893% 57.3689%, 74.5043% 54.9537%, 74.8758% 52.4892%, 75% 50%);"></div>

Answer 6

SVG 蒙版解决方案

一个圆被用作蒙版，它的半径是动画的。

点击图片后会开始动画

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="300" height="300" viewBox="0 0 600 600" >  
     <defs>
         <!-- Multicolor radial gradient -->
     <radialGradient id="grad" x1="0" y1="0" x2="100%" y2="0">

        <stop offset="10%" stop-color="#48afc1" />
        <stop offset="10%" stop-color="#b4c63b" />
       <stop offset="20%" stop-color="#ef5b2b" />
       <stop offset="20%" stop-color="#503969" />
        <stop offset="30%" stop-color="#ab6294" />
        <stop offset="30%" stop-color="#1cb98f" />
        <stop offset="40%" stop-color="#48afc1" />
        <stop offset="40%" stop-color="#b4c63b" />
        <stop offset="50%" stop-color="#ef5b2b" />
        <stop offset="50%" stop-color="#503969" />  
        <stop offset="60%" stop-color="#ab6294" />
        <stop offset="60%" stop-color="#1cb98f" />
       <stop offset="70%" stop-color="#48afc1" />
        <stop offset="70%" stop-color="#b4c63b" />
        <stop offset="80%" stop-color="#ef5b2b" />
        <stop offset="80%" stop-color="#503969" />
        <stop offset="90%" stop-color="#ab6294" />
        <stop offset="90%" stop-color="#1cb98f" />
        <stop offset="100%" stop-color="#48afc1" />
     </radialGradient>
         <!-- Mask -->
     <mask id="msk1" > 
            <rect  width="100%" height="100%"  fill="black" /> 
             
       <circle cx="300" cy="300"  r="0" fill="white" >
            <!-- Animation of a mask cutting through the image of a dragon and showing a radial gradient  -->
         <animate attributeName="r" begin="svg1.click" dur="8s" values="0;300;300;0;0" fill="freeze" repeatCount="3" />
        </circle>
     </mask>
     </defs> 
               <!-- Radial gradient background image  -->
      <circle  cx="300" cy="300"  r="300"  fill="url(#grad)"  />  
                 
          <image xlink:href="https://i.stack.imgur.com/6kywq.png" x="-140" y="-60" mask="url(#msk1)" width="800" height="780" />  

</svg>