キャンバスの勉強No.27(CSSアニメーションNo.03)
2021.08.16.07:00
今回はCSSアニメーションの第三弾です。
コロナ禍の影響で昨年に続き今年も各地で 花火大会が中止となりました。 そこでweb上で少しでも花火を楽しんで貰いた くCSSアニメーションで打ち揚げ花火のアニメ 画像を作成しました。CSSによるanimation の プロパティと@keyframes の文法の記述は比較 的単純なのですが、各花火の画像の配置位置に は苦労しました。 以下の画像とテキスト文をご参照下さい。 |
これに利用した花火の画像はweb上に公開
された多くの花火の画像と共に
からダウンロードしたsvg画像とpng画像から
構成されています。 そしてsvg画像の方は9VAeにより画像を変形して アニメgifに出力したものを採用しています。 |
| firework01.png | firework02.png | firework03.png | firework04.png |
|---|---|---|---|
 |
 |
 |
 |
|
夏の夜空の花火の各サムネイルの
画像をクリックして下さい。 | |||
| firework05.png | firework06.png | firework07.png | firework08.png |
 |
 |
 |
 |
| firework09.png | firework01.svg | firework01.gif | |
 |
 |
 |
|
夏の夜空の花火大会CSSアニメーション画像 |
|
|
|
夏の夜空の花火大会CSSアニメーション のテキスト文 |
|---|
|
|
