是否可以创建一个插入圆形剪辑路径,以便剪辑路径可以有效地在中心的div处切出一个洞,而该区域只显示中心?
div应该显示在中心切出的一个洞之外,以创建这样的东西:
我想使用剪辑路径或类似的东西,以便我可以在div后面有东西(图像和内容),剪辑路径将用于揭示这一点。因此div(来自我的jsfiddle的蓝色div)将从中心消失,使用过渡来显示其背后的内容。
div {
background: blue;
width: 200px;
height: 200px;
-webkit-clip-path: circle(50px at center);
}
<div></div>
答案 0 :(得分:5)
我认为您无法使用clip-path
实现这一目标,但您当然可以使用div
背景图片在radial-gradient
中删除一个洞。这也比clip-path
提供了更好的浏览器支持。
注意:此方法(和box-shadow
)仅在覆盖以下内容的元素具有彩色填充时才有效。如果不是sandybrown
颜色,则需要在顶部显示另一个图像,然后这些方法将不起作用,因为它们实际上没有切出一个洞,它们只是模仿这种效果。 / p>
.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;
答案 1 :(得分:3)
您也可以使用import org.apache.commons.dbutils.DbUtils;
伪元素
box-shadow
执行此操作
: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;
答案 2 :(得分:1)
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>
答案 3 :(得分:1)
您可以使用以下方法在.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;
}
答案 4 :(得分:1)
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>
答案 5 :(得分:-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
作为圆形边框。