背景色が時間変化
HTML内の<body>タグに対し、CSSのアニメーションを使い、変化させたい色や変化の時間を設定し動作を繰り返す。
See the Pen 背景色が時間変化 by Toru Katsumata (@Toru-Katsumata) on CodePen.
グラデーションが時間変化
HTML内の<body>タグに対し、CSSのアニメーションを使い大きなグラデーション背景を描画し、位置をずらして変化をつける。
See the Pen グラデーションが時間変化 by Toru Katsumata (@Toru-Katsumata) on CodePen.
流体シェイプ
HTML内の<div>タグに対し、CSSで水平方向と垂直方向の半径をアニメーションで細かく変化させ無限に再生を繰り返す。
※border-radius の値は「Fancy Border Radius Generator」（https://9elements.github.io/fancy-border-radius/）」などのジェネレーターを使うと数値が出しやすい。
See the Pen 流体シェイプ by Toru Katsumata (@Toru-Katsumata) on CodePen.
背景散らし
particles.jsというライブラリのオンラインジェネレーターを利用して描画を行い、HTML内の<div>タグの背景に指定する。
【使用するライブラリ】
particles.js（https://vincentgarreau.com/particles.js/）
オンラインジェネレーターへアクセスし、右側にあるツール内の項目を選択・数値変更を行う。最後に「Codepen」ボタンを押すと自作したソースコードが表示される。自作のJavaScriptファイルにソースコードを貼り付けて保存する。
幾何学模様
See the Pen 幾何学模様 by Toru Katsumata (@Toru-Katsumata) on CodePen.
雪が降る
See the Pen 雪が降る by Toru Katsumata (@Toru-Katsumata) on CodePen.
桜が散る
See the Pen 桜が散る by Toru Katsumata (@Toru-Katsumata) on CodePen.
ホタルが舞う
See the Pen ホタルが舞う by Toru Katsumata (@Toru-Katsumata) on CodePen.
紙吹雪が舞う
See the Pen 紙吹雪が舞う by Toru Katsumata (@Toru-Katsumata) on CodePen.
星がキラキラ
See the Pen 星がキラキラ by Toru Katsumata (@Toru-Katsumata) on CodePen.
