[CSS]数行のスタイルシートで、スター・ウォーズのオープニング風アニメーションを簡単実装

JavaScriptや画像は一切無しで、テキストが3Dで流れるスター・ウォーズのオープニングを作成するスタイルシートを紹介します。 Star Wars 3D Scrolling Text in CSS3 デモ 実装 デモ デモは最新のFirefox, Chromeでご覧ください。 IEは3Dの変形アニメーションにまだ対応していないため、IE10を待ってください。 実装 Step 1: HTML HTMLは簡単で、テキストのp要素をdiv要素二つで内包します。 titlesが外側で、titlecontentがスクロールするセクションです。 <div id="titles"><div id="titlecontent"> <p>テキストテキストテキストテキスト</p> ... ... </div></div> Step 2: CSS まずは見た目のスタイルです。 :after擬似要素でフェード

[mifio]

IEがどんどん要らない子になってゆく　>IEは3Dの変形アニメーションにまだ対応していないため、IE10を待ってください。

[suei0921]

（面白い！メモメモ。）

[Donca]

✔ [CSS]数行のスタイルシートで、スター・ウォーズのオープニング風アニメーションを簡単実装