원 및 테두리 회전 애니메이션을 구현하는 CSS 코드 예제-CSS 튜토리얼-php.cn

원 및 테두리 회전 애니메이션을 구현하는 CSS 코드 예제

不言

풀어 주다： 2018-09-18 14:54:13

원래의

3002명이 탐색했습니다.

이 글의 내용은 CSS에서 원과 테두리를 구현하기 위한 코드 예제입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

구현 효과:

원 및 테두리 회전 애니메이션을 구현하는 CSS 코드 예제

Code

html:

<div>
    <div>
        <div> </div>
    </div>
    <div>
    </div>
    <div>
    </div>
</div>

로그인 후 복사

css:

     #box {
        height:200px;
        width:200px;
    }

    .circle-out{
        height: inherit;
        width: inherit;

        display: inline-block;
        text-align: center;

        border: 20px solid blue;
        border-radius: 50%;
        
    }

    /* 绘制弧形 */
    .circle-part{
        display: inline-block;
        position: relative;
        width:0px;
        height: 0px;

        border-radius: 50%;
        border: 100px solid #0000ff05;
        border-top: 100px solid blue;

        top: -220px;
        left: 20px;

        transform: rotate(0deg);
        animation: run-part 5s infinite;
    }

    .part1{
        height: 0px;
        width: 0px;

        border-radius: 50%;
        border:100px solid #fafafa;
        border-top: 100px solid #ff000000;

        position: relative;
        top: -420px;
        left: 20px;

        transform: rotate(45deg);
        animation: run-part1 5s infinite;
    }

    .circle-inner{
        height: 0px;
        width: 0px;
        display: inline-block;

        border-radius: 50%;
        border: 20px solid blue;

        top: 80px;
        position: relative;
        
        z-index: 1000;
    }

    @-webkit-keyframes run-part1{
        0%{
            transform: rotate(45deg);
        }

        100% {
            transform: rotate(405deg);
        }
    }

    @-webkit-keyframes run-part{
        0%{
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

로그인 후 복사

css:

.circle-out{
    height: inherit;
    width: inherit;
    border: 20px solid blue;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
}

로그인 후 복사

구현 아이디어

1 그래픽 구성

외관에서 보면 그래픽은 대략 외부 원, 내부 원으로 구성됩니다. 부채꼴 구조.

1.1 외부 원

p,设置高与宽，背景不设置或白色。设置 border-radius为50%外圆圈，使用边框构成从而形成外圈。

  .circle-part{
        //(1)
        display: inline-block;
        width:0px;
        height: 0px;

        //(2)
        border-radius: 50%;
        border: 100px solid #0000ff05;
        border-top: 100px solid blue;
        
        //(3)
        position: relative;
        top: -220px;
        left: 20px;

        //(4)
        transform: rotate(0deg);
        animation: run-part 5s infinite;
    }

로그인 후 복사

效果图 ：

원 및 테두리 회전 애니메이션을 구현하는 CSS 코드 예제

1.2内圆

内圆很简单，也是使用border完成的圆，设置boder-radius:50%实现的圆的效果，最后就是一个定位的事情。

1.3扇形

扇形，在本示例中，实现的思路也是拼凑，外加旋转，利用边框border实现。

rrreee

如上代码：
分为（1）、（2）、（3）、（4）部分，出去固定形状、动画外，比较重要的就在于（2）部分。

先绘制出1/4的圆（边框）。其他另外3/4的扇形以透明绘制。

相同的，另外使用另外一个圆进行相同的处理，这样两个圆就能重叠在一起，唯一不同的是：第二个圆设置那3/4圆作为白色，1/4设置为透明色。

这时，呈现的为1/4的扇形，背景为blue,而因为透明的原因1/4是完全暴露的。

最后，由于最后的圆为顶层元素，所以当顶层元素发生旋转时，蓝色的扇形部分就会被顶层元素那3/4

이 예제에서는 높이와 너비를 설정하는 데 주로 p가 사용되었으며 배경은 설정되지 않거나 흰색이 아닙니다. border-radius를 외부 원의 50%로 설정하고 테두리 구성을 사용하여 외부 원을 형성합니다.

rrreee

렌더링:
🎜🎜 원 및 테두리 회전 애니메이션을 구현하는 CSS 코드 예제

🎜🎜🎜🎜1.2 내부 원🎜🎜🎜 내부 원은 매우 간단합니다. 테두리를 사용하여 완성된 원이기도 합니다. boder-radius:50%를 설정하세요. 원형 효과를 달성하는 것은 궁극적으로 위치 지정의 문제입니다. 🎜🎜1.3 섹터 🎜🎜섹터, 이 예에서 구현 아이디어는 또한 조각을 모으고, 회전을 추가하고, border 테두리를 사용하여 이를 달성하는 것입니다. 🎜rrreee🎜위 코드: 🎜(1), (2), (3), (4) 부분으로 나누어져 있으며, 고정된 모양과 애니메이션 외에 더 중요한 부분은 (2)입니다. 🎜🎜먼저 1/4의 원(테두리)을 그립니다. 3/4의 다른 섹터는 투명하게 그려집니다. 🎜🎜동일한 과정에 다른 원을 사용하면 두 원이 서로 겹칠 수 있습니다. 유일한 차이점은 두 번째 원이 3/4 원을 1로 설정한다는 것입니다. /4는 투명색으로 설정됩니다. 🎜🎜이때, 파란색 배경에 1/4의 부채꼴 모양이 제시되며, 투명도 때문에 1/4이 완전히 노출됩니다. 🎜🎜마지막으로 마지막 원이 최상위 요소이므로 최상위 요소를 회전시키면 파란색 부채꼴 부분이 3/4 부채꼴 영역에 의해 가려지게 됩니다. 최상위 요소. 최종 효과를 얻으려면. 🎜🎜코드 끝에 자신만의 애니메이션을 추가하여 최종 효과를 얻으세요. 🎜🎜

위 내용은 원 및 테두리 회전 애니메이션을 구현하는 CSS 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!