Wie erstelle ich in CSS einen transparenten Kreis mit einem Randradius?-CSS-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-10-25 06:09:02

Original

803 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!