CSS에서 테두리 반경이 있는 투명한 원을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 테두리 반경이 있는 투명한 원을 만드는 방법은 무엇입니까?

Linda Hamilton

Oct 25, 2024 am 06:09 AM

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.