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

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

こんにちは!

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

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

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

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

image02

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

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

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

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

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

CSS:

あなたにおすすめ

FlickrのAPIとPHP/HTML/CSSを使って写真ギャラリーサイトを作りましょう。PHPのコ... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.2 APIの秘... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.1 ゴールと背... 最近サイドプロジェクトをネットに上げました: http://premflux.com/cc0/free-photo-japan-tsukuba-32576937024.html そのプロジェクトの開発をAからZまで細かく説明したいと...
ドキュメントは手書きでもよくない?... 開発をする上でドキュメントはとても大切です。 それはウォーターフォール型開発かアジャイル型開発かに関わらずとても大切です。 しかしドキュメントを作成に膨大な時間を費やすことで、ドキュメント作成自体が目的になってしまい、生産性を伴いません。...