如何在 CSS 中建立帶有邊框半徑的透明圓？
- Linda Hamilton原創
- 2024-10-25 06:09:02849瀏覽
在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