ホームページ > 記事 > ウェブフロントエンド > CSSで境界線半径のある透明な円を作成する方法?
CSSで境界線半径のある透明な円を作成する方法?
- Linda Hamiltonオリジナル
- 2024-10-25 06:09:02787ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。