Home
CSS
CSSだけでぷよぷよしたアニメーションの実装方法

CSSだけでぷよぷよしたアニメーションの実装方法

公開日
2021.09.25
更新日
2022.04.02
CSSだけでぷよぷよしたアニメーションの実装方法

どうも!かけちまるです!

webサイトの背景に丸をあしらったデザインや画像を丸でマスクしたデザインがあります。
そんな時にサイトの雰囲気に合えば水々しいようなぷよぷよしたアニメーションが使えるかも知れません。

しかも、CSSだけで手軽に実装できるので導入しやすいのも良いところです。

この記事では、

  • ・ぷよぷよアニメーションの実装方法
  • ・border-radiusの仕様説明

を解説します。

今回の完成例

今回、実装する完成形は以下になります。

HTML

HTML
コピー
<div class="wrap"> <div class="circle"></div> </div>

CSS

CSS
コピー
.wrap{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .circle{ background-color: #7fcce3; padding-top: 10%; width: 10%; animation-name: puyopuyo; animation-duration: 20.0s; animation-timing-function: ease; animation-iteration-count: infinite; } @keyframes puyopuyo{ 0%{ border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; } 14%{ border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; } 28%{ border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; } 42%{ border-radius: 61% 39% 55% 45%/61% 38% 62% 39%; } 56%{ border-radius: 61% 39% 67% 33%/70% 50% 50% 30%; } 70%{ border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; } 84%{ border-radius: 46% 54% 50% 50%/35% 61% 39% 65%; } 100%{ border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; } }

border-radiusの仕様

今回のぷよぷよアニメーションで使用したborder-radiusプロパティですがよく使う指定の仕方じゃないと思います。
少し特殊な指定の仕方なので詳しく解説していきます。

今回解説するのは以下のような書き方

CSS
コピー
border-radius: 10px 15px 20px 25px / 30px 35px 40px 45px;

角丸ができる仕組み

どこがなんの値かわからないかもですが、実はborder-radiusには細かく区切ると8つあります。
まず、四角形の1角がどんな感じで角丸になっているかというと例えば右上だったら「右上の上部分」と「右上の下部分」に分けられます。

角丸ができる仕組み

どこがどの値なの?

そして本題です。
以下の書き方でどこがどの値なのかというところですが、言葉だとわかりにくいので画像で説明します。

CSS
コピー
border-radius: 10px 15px 20px 25px / 30px 35px 40px 45px;
どこがどの値なの?

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

jQueryでスクロール中か否かを判定する方法

jQueryでスクロール中か否かを判定する方法

GLSLの修飾子varyingの使い方【Three.js】

GLSLの修飾子varyingの使い方【Three.js】

translateを使わずにpositionで要素を中央寄せにする方法

translateを使わずにpositionで要素を中央寄せにする方法

floatで雑誌のようなテキストの回り込みを表現する

floatで雑誌のようなテキストの回り込みを表現する

【WordPress】記事の公開日と最終更新日を表示

【WordPress】記事の公開日と最終更新日を表示

コピペで完了!CSSグラデーション(linear-gradient)まとめ

コピペで完了!CSSグラデーション(linear-gradient)まとめ