【CSSアニメ】回転する綺麗なカラーボールの作り方

URLをコピーしました！

suzuto

HTMLとCSSで、回転するカラーボールを作っていくよ。

ティアラ

コードだけで作っていくのね。

こんにちは、suzutoです。

今回はHTMLとCSSで回転して動くカラーボールを作っていきます。

完成形は以下のようになります。

See the Pen ライトニングボール by スズキトシヤ (@agpslbps-the-styleful) on CodePen.

簡単なHTML、CSSだけで作ることができるのでぜひお試しを。それでは、早速解説していきますね。

本記事の内容

【CSSアニメ】回転するカラーボールの作り方解説

手順は以下の通りです。

HTMLで円を作る
CSSで円の装飾
CSSで色相を回転させるアニメーションをつける

HTMLで円を作る

まずはHTMLで正円を作ります。クラス名に「circle」と名前をつけておきます。

<div class="circle"></div>

CSSで円の装飾

CSSで円のスタイリングです。

.circle {
        width: 150px;
        height: 150px;
        margin: 2rem auto;
        background-image: linear-gradient(90deg, rgb(148, 255, 180),rgb(119, 187, 233)100%, rgb(223, 208, 172));
        border-radius: 50%;
        box-shadow: inset 0 0 7px .5px rgb(104, 157, 207);
    }

幅と高さを「150px」として正円に。正円ではなくても大丈夫ですが、今回は綺麗な丸を作るため幅と高さを同じにしています。

円に対して背景色にグラデーションを設定。今回は「青から赤」になるようなグラデーションを設定しました。

background-image: linear-gradient(90deg, rgb(148, 255, 180),rgb(119, 187, 233)100%, rgb(223, 208, 172));

さらに、角を50%にして円にします。

border-radius: 50%;

より立体感をだすために、円の内側にボックスシャドウをつけておきます。

box-shadow: inset 0 0 7px .5px rgb(104, 157, 207);

box-shadowのプロパティに「inset」を指定すると、要素の内側にボックスシャドウを入れることができます。今回の例では円の内側にボックスシャドウを付けたかったので「inset」を指定しています。

CSSで色相を回転させるアニメーションをつける

先ほどのクラス名「circle」に対してCSSでアニメーションをつけていきます。まずはアニメーションの指定です。

animation: rotate 2s alternate infinite;

animation: rotate 2s alternate infinite;
アニメーション名「rotate」、2秒かけて、色相の変化が終わったら反転、無限ループさせる

さらにキーフレームを指定して細かく設定します。

@keyframes rotate{
0% {
filter: hue-rotate(360deg);
}

hue-rotate(360deg)
色相を360度回転させる。ちなみにhue-rotate(1turn)でもOKです。

これで完成です。

.circle {
        width: 150px;
        height: 150px;
        margin: 2rem auto;
        background-image: linear-gradient(90deg, rgb(148, 255, 180),rgb(119, 187, 233)100%, rgb(223, 208, 172));
        border-radius: 50%;
        box-shadow: inset 0 0 7px .5px rgb(104, 157, 207);
        animation: rotate 2s alternate infinite;
    }

@keyframes rotate{
        0% {
            filter: hue-rotate(360deg);
        }
    }

【まとめ】CSSで回転するカラーボールの作り方解説

全体の完成コードは以下になります。

<div class="circle"></div>

.circle {
        width: 150px;
        height: 150px;
        margin: 2rem auto;
        background-image: linear-gradient(90deg, rgb(148, 255, 180),rgb(119, 187, 233)100%, rgb(223, 208, 172));
        border-radius: 50%;
        box-shadow: inset 0 0 7px .5px rgb(104, 157, 207);
        animation: rotate 2s alternate infinite;
    }

@keyframes rotate{
        0% {
            filter: hue-rotate(360deg);
        }
    }

今回のポイントは以下2点です。