Bagaimana untuk Membuat Bulatan Telus dengan Jejari Sempadan dalam CSS?-tutorial css-php.cn

Bagaimana untuk Membuat Bulatan Telus dengan Jejari Sempadan dalam CSS?

Linda Hamilton

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

asal

803 orang telah melayarinya

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

Menghidupkan Bulatan dengan Latar Belakang Lutsinar dan Jejari Sempadan dalam CSS

Anda sedang cuba melukis bulatan dengan jejari sempadan, tetapi anda menghadapi kesukaran dalam menindih elemen sambil memastikan latar belakang bulatan itu telus. Ini kerana topeng, yang diperlukan untuk menyembunyikan separuh kiri bulatan semasa putaran, menghalang tindanan daripada kelihatan telus pada elemen lain.

Kod Asal:

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

Salin selepas log masuk

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

Salin selepas log masuk

Penyelesaian:

Tetapkan imej latar belakang dengan corak kecerunan berulang pada badan, membolehkan latar belakang telus sambil mengekalkan minat visual.

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

Salin selepas log masuk

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bulatan Telus dengan Jejari Sempadan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!