css實現圓與邊框旋轉動畫的案例

小編給大家分享一下css實現圓與邊框旋轉動畫的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

實現效果：

代碼

html:

<div id="box">
    <div class="circle-out">
        <div class="circle-inner"> </div>
    </div>
    <div class="circle-part">
    </div>
    <div class="part1">
    </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);
        }
    }

實現思路

1 圖形構成

從外觀看到，該圖形大致由：外圓，內圓及構扇形構成。

1.1 外圓

在本示例中，主要采用一個p,設置高與寬，背景不設置或白色。設置 border-radius為50%外圓圈，使用邊框構成從而形成外圈。

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

效果圖 ：

1.2內圓

內圓很簡單，也是使用border完成的圓，設置boder-radius:50%實現的圓的效果，最后就是一個定位的事情。

1.3扇形

扇形，在本示例中，實現的思路也是拼湊，外加旋轉，利用邊框border實現。

  .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;
    }

如上代碼：
分為（1）、（2）、（3）、（4）部分，出去固定形狀、動畫外，比較重要的就在于（2）部分。

先繪制出1/4的圓（邊框）。其他另外3/4的扇形以透明繪制。

相同的，另外使用另外一個圓進行相同的處理，這樣兩個圓就能重疊在一起，唯一不同的是：第二個圓設置那3/4圓作為白色，1/4設置為透明色。

這時，呈現的為1/4的扇形，背景為blue,而因為透明的原因1/4是完全暴露的。

最后，由于最后的圓為頂層元素，所以當頂層元素發生旋轉時，藍色的扇形部分就會被頂層元素那3/4的扇形區域所遮蔽。從而達到最后的效果。

代碼最后加上自己的動畫，實現最后的效果。

以上是css實現圓與邊框旋轉動畫的案例的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！