Comment créer un cercle transparent avec un rayon de bordure en CSS ?-tutoriel CSS-php.cn

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

Linda Hamilton

Libérer： 2024-10-25 06:09:02

original

803 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!