CSSで作るグラデーション

自分用メモでもありますが、ブログ更新しています。
今回は、CSSで作る動くグラデーションです。
はっきり言って需要無い、遊び心です。

動くグラデーション「CSS」ナナヨ マニュアル - 板橋のナナヨの備忘ブログ動くグラデーション「CSS」ナナヨ マニュアル

@keyframesでアニメーションを指定しています。

動くグラデーション「CSS」ナナヨ マニュアル

div.gradation-area div.pattern-box.a01{
background-image:
radial-gradient(ellipse farthest-corner at center, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
/*円形グラデーションを指定*/
animation-duration: 8.5s;
/*アニメーション一回分の時間の長さ*/
animation-iteration-count: infinite;
/*アニメーションの繰り返し回数を指定する(無限)*/
animation-name: animation-e01;
/*アニメーション名を指定する@keyframesでこの名を使用*/
}

動くグラデーション「CSS」ナナヨ マニュアル