CSSで「丸」を作ってみよう

HTMLの作成

ブロック要素を作り、任意のclassを設定します。
今回はmaruというclassを設定しました。

HTML

<div class="maru maru1">●</div>
<div class="maru maru2">★</div>
<div class="maru maru3"></div>

CSSの設定

.maru に border-radius: 50% を指定すれば「丸」の完成です。

CSS

.maru{
    width: 160px;
    height: 160px;/* 縦横同じサイズのブロック指定 */
    margin: 30px;
    border-radius: 50%;/* 50%指定で丸が完成 */
    animation: roll 5s linear infinite;
}
.maru1{
    background-color: #25c7c9;/* ベタの「丸」 */
}
.maru2{
    background: linear-gradient(#25c7c9, #a530ff);/* グラデーションの「丸」 */
}
.maru3{
    background: repeating-conic-gradient( #25c7c9 0 15deg, #e1f1e9 15deg 30deg);/* 放射状の「丸」 */
}
@keyframes roll {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

サンプル

See the Pen Untitled by renault1124 (@renault1124) on CodePen.

おまけ

あんまり簡単に「丸」が完成してしまったので、「丸」を回転させてみました。

1. keyframes の roll（任意）にアニメーションを指定
2. .maru に roll を割り当ててアニメーションの時間や動き方を指定（今回は5秒で一定の速度）

これで回ります。

ベタの「丸」では回転させてもわからない

「丸」にグラデーションをつけてみた！
「サンプル」真ん中の「丸」はグラデーションがついているので回っているのがかすかにわかります。
もっと回っているのがわかるように右の「丸」には放射状のグラデーションを設定しました。
こちらは、repeating-conic-gradient　を設定するだけでOK！
任意の角度と色を入れたら360°繰り返されます。

以上です。