CSS Web制作

CSSで歪んだ手書き風の円を作る方法【hoverアニメーションサンプルあり】

2024年9月25日

※ 当サイトではアフィリエイト広告を利用しています

CSSでいびつな形の円を作れない?

CSSで円を作るのは簡単ですが、手書き風の歪んだ円を作るのは難しいと思いませんか?しかし、普通の円を作る方法と使うプロパティは同じです。

今回は、CSSで歪んだ手書き風の円を作る方法を解説します。hoverを使ったアニメーションもサンプル付きで解説しています。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

CSSで通常の円を作る方法

まずは、基本となる普通の円のコードを見てみます。

 

コード解説(HTML / CSS)

HTMLはこちら。

<div class="circle">
  <p>テキスト</p>
</div>

pタグは別になくても大丈夫ですが、後で回転させたりするので、テキストが動かないところを見るために書いています。

CSSはこちら。

.circle {
  background-color: #1cb4d3; /* 円の色 */
  border-radius: 50%; /* 要素を円形にする */
  height: 200px; /* 円の高さ */
  width: 200px; /* 円の幅 */
}

円にするためのコードはborder-radius: 50%;で、これが無いとただの四角になります。

これは必要なコードしか書いてないので、全部のコードが見たい方はこの後のサンプルからご確認ください。

 

サンプル(デモ)

サンプルはこちらです。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.



CSSで歪んだ手書き風の円を作る方法

それでは本題です。

 

コード解説(CSS)

歪んだ手書き風の円にするのに使用するプロパティは、先ほどのborder-radiusだけです。

例えば、border-radius: 50%;を以下のようにしてみます。

.circle {
  border-radius: 31% 47% 35% 47% / 42% 55% 51% 34%; /* 要素を歪んだ円形にする */
}

 

サンプル(デモ)

こちらがサンプルです。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

%の数値を変えることで、変形可能です。



transformで角度を変えてより歪んだように見せる

先ほどの書き方からtransformを使って角度を変えると、歪み具合は同じですがより歪んだように見せることができます。

 

コード解説(CSS)

先ほどに追記したCSSのコードはこちら。

.circle {
  transform: rotate(-30deg);
}
p {
  transform: rotate(30deg);
}

どっちがマイナスでも構いませんが、.circleだけ角度を変えると直下のテキストも傾いてしまうので、テキストは逆方向の同じ数値で傾けて相殺しています。

 

サンプル(デモ)

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

歪み具合は同じですが、より歪んだように見えませんか?



hoverで歪んだ円をアニメーションで動かす

次は、hoverで歪みを変えてみたいと思います。元は、先ほどの角度を変えた円にします。

 

コード解説(CSS)

追記したCSSのコードはこちら。

.circle:hover {
  border-radius: 45% 20% 21% 57% / 53% 71% 51% 25%;
}

hoverを付けて、%の数値を変えています。

さらに、これをアニメーションにするには、以下のコードを追記します。

.circle {
  transition: border-radius 0.3s; /* じんわり変化 */
}
.circle:hover {
  transition: border-radius 0.3s; /* じんわり変化 */
}

これは、hoverしたときと離したときの両方にアニメーションを指定しています。

 

サンプル(デモ)

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

カーソルを乗せると、アニメーションで変形します。



歪んだ手書き風の円を自動で作れるジェネレーター

これで歪んだ円を作る方法は分かったと思いますが、%が直感的ではなく、イメージに近付けるのは難しいと思います。

そこで、以下のサイトを使えば、簡単にコードを生成してくれます。

Fancy Border Radius Generator

使い方は簡単で、周りにある四角を動かせば、下にコードが生成されます。

Fancy Border Radius Generator

Fancy Border Radius Generator

COPYをクリックすれば、コードはコピーされます。

まとめ

今回は、CSSのborder-radiusを使って、歪んだ手書き風の円を作る方法を解説しました。

歪ませてから傾けて、さらにhoverのアニメーションも付けるとかなり凝った感じになるかと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-CSS, Web制作