CSSで境界線半径のある透明な円を作成する方法?-CSSチュートリアル-php.cn

CSSで境界線半径のある透明な円を作成する方法?

Linda Hamilton

リリース： 2024-10-25 06:09:02

オリジナル

803 人が閲覧しました

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

CSS で透明な背景と境界線半径を持つ円をアニメーション化する

境界線半径を持つ円を描画しようとしています。しかし、円の背景を透明に保ちながら要素をオーバーレイするのは困難に直面しています。これは、回転中に円の左半分を隠すために必要なマスクにより、オーバーレイが他の要素の上に透明に表示されるのを防ぐためです。

元のコード:

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

ログイン後にコピー

解決策:

繰り返しのグラデーションパターンを持つ背景画像を本体に設定します。これにより、視覚的な関心を維持しながら背景を透明にすることができます。

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

ログイン後にコピー

以上がCSSで境界線半径のある透明な円を作成する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。