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

我认为您无法使用clip-path实现这一目标，但您当然可以使用div背景图片在radial-gradient中删除一个洞。这也比clip-path提供了更好的浏览器支持。

注意：此方法（和box-shadow）仅在覆盖以下内容的元素具有彩色填充时才有效。如果不是sandybrown颜色，则需要在顶部显示另一个图像，然后这些方法将不起作用，因为它们实际上没有切出一个洞，它们只是模仿这种效果。 / p>

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您也可以使用import org.apache.commons.dbutils.DbUtils;伪元素

上的box-shadow执行此操作

＆＃13;

:after

＆＃13;

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;
}

＆＃13;

Answer 3

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 4

您可以使用以下方法在.mat-menu-item:hover{ background-color:blue !important; }中创建孔：

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;
    }

Answer 5

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>

Answer 6

您可以通过在<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作为圆形边框。

剪辑路径插入圈？

6 个答案: