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 중국어 웹사이트의 기타 관련 기사를 참조하세요!