剪辑路径插入圆圈?
Clip path inset circle?
是否可以创建一个插入的圆形剪辑路径,以便剪辑路径可以有效地在中心 div 切出一个洞,而不是只显示中心?
div 应该全部显示出来,除了在中心切出一个洞来创建这样的东西:
我想使用剪辑路径或类似的东西,这样我就可以在 div 后面放置东西(图像和内容),剪辑路径将用于显示这些内容。因此 div(来自我的 jsfiddle 的蓝色 div)将从中心消失,使用过渡来显示其背后的内容。
div {
background: blue;
width: 200px;
height: 200px;
-webkit-clip-path: circle(50px at center);
}
<div></div>
您可以通过在 <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/
You can also use border-radius
in div for rounded borders.
我认为您无法使用 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>
您也可以在 :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>
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>
您可以使用这种方法在 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>
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>
是否可以创建一个插入的圆形剪辑路径,以便剪辑路径可以有效地在中心 div 切出一个洞,而不是只显示中心?
div 应该全部显示出来,除了在中心切出一个洞来创建这样的东西:
我想使用剪辑路径或类似的东西,这样我就可以在 div 后面放置东西(图像和内容),剪辑路径将用于显示这些内容。因此 div(来自我的 jsfiddle 的蓝色 div)将从中心消失,使用过渡来显示其背后的内容。
div {
background: blue;
width: 200px;
height: 200px;
-webkit-clip-path: circle(50px at center);
}
<div></div>
您可以通过在 <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/
You can also use
border-radius
in div for rounded borders.
我认为您无法使用 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>
您也可以在 :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>
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>
您可以使用这种方法在 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>
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>