如何在 CSS 中创建带有边框半径的透明圆？-css教程-PHP中文网

如何在 CSS 中创建带有边框半径的透明圆？

Linda Hamilton

发布： 2024-10-25 06:09:02

原创

803 人浏览过

How to Create a Transparent Circle with a Border-Radius in CSS?

在 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中文网其他相关文章！