Heim >Web-Frontend >CSS-Tutorial >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:02856Durchsuche
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!