如何在 CSS 中创建带有边框半径的透明圆？
- Linda Hamilton原创
- 2024-10-25 06:09:02850浏览
在 CSS 中动画具有透明背景和边框半径的圆形
您正在尝试绘制具有边框半径的圆形，但是您在覆盖元素同时保持圆圈背景透明时遇到困难。这是因为在旋转过程中隐藏圆的左半部分所必需的遮罩可防止叠加层透明地出现在其他元素上。
原始代码：
<code class="html"><div class="background">
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
</div></code>
<code class="css">.wrapper .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
border-right: none;
border-color: red;
}
.wrapper .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
border-left: none;
}
.wrapper .mask {
position: absolute;
width: 50%;
height: 100%;
background: #0000FF;
opacity: 1;
}</code>
解决方案：
- 为正文设置一个具有重复渐变图案的背景图像，允许透明背景，同时保留视觉兴趣。
<code class="html"><body>
<div id="container">
<div id="halfclip">
<div class="halfcircle" id="clipped"></div>
</div>
<div class="halfcircle" id="fixed"></div>
</div>
</body></code>
<code class="css">body {
background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
}
#container {
width: 200px;
height: 200px;
border: solid red 1px;
}
#halfclip {
width: 50%;
height: 100%;
right: 0px;
transform-origin: left center;
animation-duration: 16s;
}
.halfcircle {
height: 100%;
right: 0px;
border-radius: 50%;
}
#clipped {
width: 200%;
border-top-color: blue;
border-left-color: blue;
}
#fixed {
width: 100%;
transform: rotate(135deg);
animation-delay: 12s;
}</code>以上是如何在 CSS 中创建带有边框半径的透明圆？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn