CSSアニメーションで「車」を動かす編 -CSSで表現してみよう 2

CSSアニメーションで「車」を動かす編 -CSSで表現してみよう 2

こんにちは!

身近なモノをCSSで表現する試み第2弾です。
前回はボーダー柄のシャツを作成いたしました(前回の記事はこちらから)。

CSSアニメーションで動く車を再現

今回は車を作成してみようと思います。
加えて車にCSSで動きをつけてみようと思います。

こちら完成品です。(*完成品をGIFアニメ化しています。)

image02

ライターの「酒怪物」に初乗車して頂きました!笑

前回と同じようにHTML要素とCSSアニメーションだけで「車」が表現できました。

動きをつける為、車体/車輪/排気ガスにanimationというプロパティを使用しています。animationプロパティの使い方を含めソースコードの詳しい解説は次回行っていきたいと思います。

お忙しいところ、ご覧頂きありがとうございました!

ソースコード
※最新のモダンブラウザのみ動作を保障しています。
HTML:

CSS:

コメント