Maison >interface Web >tutoriel CSS >Comment créer un cercle transparent avec un rayon de bordure en CSS ?

Comment créer un cercle transparent avec un rayon de bordure en CSS ?

Linda Hamiltonoriginal: 2024-10-25 06:09:02883parcourir

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

Animation d'un cercle avec un arrière-plan transparent et un rayon de bordure en CSS

Vous essayez de dessiner un cercle avec un rayon de bordure, mais vous rencontrez des difficultés pour superposer des éléments tout en gardant l'arrière-plan du cercle transparent. En effet, le masque, nécessaire pour masquer la moitié gauche du cercle lors de la rotation, empêche la superposition d'apparaître de manière transparente sur d'autres éléments.

Code original :

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

Solution :

Définissez une image d'arrière-plan avec un motif dégradé répétitif sur le corps, permettant d'obtenir un arrière-plan transparent tout en conservant l'intérêt visuel.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css for while this border background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：**Pouvez-vous appliquer des classes CSS directement aux morceaux de code RMarkdown ?**Article suivant：**Pouvez-vous appliquer des classes CSS directement aux morceaux de code RMarkdown ?**

Articles Liés

Voir plus