Heim > Artikel > Web-Frontend > Wie erstelle ich in CSS einen transparenten Kreis mit einem Randradius?

Wie erstelle ich in CSS einen transparenten Kreis mit einem Randradius?

Linda HamiltonOriginal: 2024-10-25 06:09:02787Durchsuche

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

Animieren eines Kreises mit transparentem Hintergrund und Randradius in CSS

Sie versuchen, einen Kreis mit einem Randradius zu zeichnen. Sie haben jedoch Schwierigkeiten, Elemente zu überlagern und gleichzeitig den Hintergrund des Kreises transparent zu halten. Dies liegt daran, dass die Maske, die zum Ausblenden der linken Hälfte des Kreises während der Drehung erforderlich ist, verhindert, dass die Überlagerung transparent über anderen Elementen erscheint.

Originalcode:

<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>

Lösung:

Legen Sie ein Hintergrundbild mit einem sich wiederholenden Verlaufsmuster für den Körper fest, um einen transparenten Hintergrund zu ermöglichen und gleichzeitig das visuelle Interesse beizubehalten.

<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>

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS einen transparenten Kreis mit einem Randradius?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css for while this border background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：**Können Sie CSS-Klassen direkt auf RMarkdown-Codeblöcke anwenden?**Nächster Artikel：**Können Sie CSS-Klassen direkt auf RMarkdown-Codeblöcke anwenden?**

In Verbindung stehende Artikel

Mehr sehen