CSS 有機的に動く円の作成方法
最終更新日 - 公開日 2021.05.14
by
CSS で有機的に動く円の作成方法を紹介します。
例えば、ページのアクセントや、サムネイルのワンポイントに便利な方法です。
CSSで有機的な円を作る
CSS で有機的な円を作るには border-radius に複数のプロパディ値を指定します。
実装時の見た目はこちら。
ベースのHTMLはこちら。
<div class="round-wrap">
<div class="round"></div>
</div>
続いてCSSの指定はこちら。
.round-wrap {
width: 200px;
height: 200px;
}
.round {
width: 100%;
height: 100%;
border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
background-color: #03A9F4;
}
始めから値を調整して作るには難易度が高いので、FANCY-BORDER-RADIUS
などの、自由な形の円を作れるサービスの利用をおすすめします。
CSSで有機的な円を動かす
CSSで有機的な円を動かすには animation を利用します。
円の要素に animation を指定。動かす要素に border-radius を指定することで、揺らぐ感じを出すことができます。
実装時の見た目はこちら。（わかりやすい様に動く速度を速くしています。）
ベースのHTMLはこちら。
<div class="round-wrap">
<div class="round"></div>
</div>
続いてCSSの指定はこちら。
.round-wrap {
width: 200px;
height: 200px;
}
.round {
width: 100%;
height: 100%;
border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
animation: round_anime 5s linear infinite;
background-image: url(https://hirashimatakumi.com/img/landscape.jpg);
background-size: cover;
overflow: hidden;
}
@keyframes round_anime {
0% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
100% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
}
円の動きを滑らかにする
円の動きを滑らかにするには、アニメーションをゆっくり動かす方法の他に、円を回して自然な動きに見せる方法もあります。
円を回す場合は円の要素を直接回すか、親要素を追加して親を回す方法があります。
今回は、親要素を追加して回してみたいと思います。
実装時の見た目はこちら。（rotate を追加）
ベースのHTMLはこちら。
<div class="round-wrap">
<div class="rotate">
<div class="round"></div>
</div>
</div>
続いてCSSの指定はこちら。
.round-wrap {
width: 200px;
height: 200px;
}
.rotate {
width: 100%;
height: 100%;
animation: rotate-anime 30s linear infinite;
}
@keyframes rotate-anime {
0% {transform: rotate(0);}
100% {transform: rotate(-360deg);}
}
.round {
width: 100%;
height: 100%;
border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
animation: round_anime 5s linear infinite;
background-color: #03A9F4;
}
@keyframes round_anime {
0% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
100% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
}
なぜ親を追加して親を回すかには、後述する画像を入れることに関係してきます。
円の中に写真を入れるとうまくいかない
円の中に写真を入れる場合に注意が必要です。
動きを滑らかにするために、親要素を追加した方法に背景画像を指定します。すると、
こんな感じで背景画像がぐるぐる回ってしまいます。
そこで、子要素を追加してそこに背景画像を追加。追加した子要素を親要素の回転と逆回転させて、背景画像を固定します。
<div class="round-wrap">
<div class="rotate">
<div class="round">
<div class="round-inner"></div>
</div>
</div>
</div>
.round-wrap {
width: 200px;
height: 200px;
}
.rotate {
width: 100%;
height: 100%;
animation: rotate-anime 30s linear infinite;
}
@keyframes rotate-anime {
0% {transform: rotate(0);}
100% {transform: rotate(-360deg);}
}
.round {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
animation: round_anime 30s linear infinite;
overflow: hidden;
}
@keyframes round_anime {
0% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
100% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
}
.round-inner {
width: 100%;
height: 100%;
background-image: url(https://hirashimatakumi.com/img/landscape.jpg);
background-position: center center;
background-size: cover;
transform: scale(1.1,1.1) rotate(0);
animation: round-inner-anime 30s linear infinite;
}
@keyframes round-inner-anime {
0% {transform: scale(1.1,1.1) rotate(0);}
100% {transform: scale(1.1,1.1) rotate(360deg);}
}
滑らかに回転させなければ、要素を複雑にする必要がないので、案件に合わせて適宜調整を加えてください。
まとめ
CSS で有機的に動く円の作成方法を紹介しました。
