CSSを使用して円と境界線の回転アニメーションを実装するコード例

この記事の内容は CSS で円と枠線を実現するためのコード例です。必要な方は参考にしていただければ幸いです。

達成効果:

##コード

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

実装アイデア

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 内側の円

#内側の円も非常にシンプルで、境界線を使用して完成した円です。 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

の他のセクターは透明に描画されます。 同様に、同じ処理に別の円を使用します。これにより、2 つの円が互いに重なり合うことができます。唯一の違いは、2 番目の円が 3/4 円を白として設定することです。

1/4

は透明色に設定されます。 このとき、背景は青で扇形が

1/4

となり、透明により1/4が完全に露出します。 最後に、最後の円が最上位の要素であるため、最上位の要素を回転させると、青い扇形の部分が 3/4 の扇形によって隠されてしまいます。最上位要素の形状領域。最終的な効果を達成するため。

コードの最後に独自のアニメーションを追加して、最終的な効果を実現します。

以上がCSSを使用して円と境界線の回転アニメーションを実装するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。