キャンバスの勉強No.27(CSSアニメーションNo.03)

2021.08.16.07:00





 今回はCSSアニメーションの第三弾です。

 コロナ禍の影響で昨年に続き今年も各地で

 花火大会が中止となりました。

 そこでweb上で少しでも花火を楽しんで貰いた

 くCSSアニメーションで打ち揚げ花火のアニメ

 画像を作成しました。CSSによるanimation の

 プロパティと@keyframes の文法の記述は比較

 的単純なのですが、各花火の画像の配置位置に

 は苦労しました。

 以下の画像とテキスト文をご参照下さい。





 これに利用した花火の画像はweb上に公開

 された多くの花火の画像と共に

Open Clip Art Library

 からダウンロードしたsvg画像とpng画像から

 構成されています。

 そしてsvg画像の方は9VAeにより画像を変形して

 アニメgifに出力したものを採用しています。

firework01.png firework02.png firework03.png firework04.png
花火01 花火02 花火03 花火04
夏の夜空の花火の各サムネイルの
画像をクリックして下さい。
firework05.png firework06.png firework07.png firework08.png
花火05 花火06 花火07 花火08
firework09.png firework01.svg firework01.gif
花火09 花火10 花火gif




夏の夜空の花火大会CSSアニメーション画像



夏の夜空の花火大会CSSアニメーション

のテキスト文

関連記事

comment

Secret

プロフィール

chappychan2

Author:chappychan2
FC2ブログへようこそ!

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR