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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.