divでぐるぐる回転するボタンを作ってみた
目次
まず完成形
完成形を見た方が早いので、まずは完成形。こんな感じのボタンを作成したかったのですが記事を探せど探せど見つからず自力で作成しました。
See the Pen
oNNomEY by webnohito (@web-no-hito)
on CodePen.
コード
HTML
今回はdiv要素一つで作成しました。
<div></div>
CSS
次にCSSです。SCSS記法で記述しておりますので、必要に応じて変換等してください。
body {
background: #474b42; // 画面の背景色
}
@keyframes spin { // spinという名前のアニメーションを作成
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
div {
width: 140px; // widthとheightは揃えてください
height: 140px;
margin: auto;
border-radius: 50%; // 要素を円にする
border: 40px solid #f0f; //ぐるぐるしている部分
border-color: transparent transparent transparent #c3d825; // 1辺のみ色を付ける
animation: spin 1s linear infinite; // 秒数で回転速度変更
&:after { // after要素が中央の円になる
content: "";
display: block;
border-radius: 50%;
width: 140px;
height: 140px;
background: #69821b;
}
}
コード内に軽く解説を書きましたが、ポイントはぐるぐるしている部分をどう実装するかだと思います。
div要素自体の背景色を指定しない(transparent)ことでボーダー部分にのみ色がつきます。そしてそのボーダーはtop/right/bottom/leftのどこか1辺にのみに色をつけることでこのような実装が可能です。
あともう1点はkeyframeでアニメーションを作成しておきましょう。これはよく見るアニメーションだと思いますが、要素を回転させるためのアニメーションです。
アニメーション補足
自分でまとめるよりも分かりやすく記事してくださっている方がいらっしゃいますのでこちらの記事をご参考いただけたらと思います。