スターウォーズのオープニングロールが作れるCSS

スターウォーズのオープニングテロップが簡単に作れるCSSがあったので試してみました。

ソースファイルのダウンロードや使い方はこちら
http://polarnotion.github.io/starwarsintro/

作り方

作り方は非常に簡単でして、まず以下のHTMLファイルを作成し、『starwarsintro.css』と『ロゴ画像』を読み込ませます。

<!-- スタイルシートのパス（任意の場所） -->
<link rel="stylesheet" href="starwarsintro.css">

<!-- ここからページの内容 -->
<div class="star-wars-intro">

  <!-- 最初の青文字 -->
  <p class="intro-text">
    ここに青文字の内容。
    <!-- A long time ago in a galaxy far, far away... -->
  </p>

  <!-- ロゴ -->
  <h2 class="main-logo">
    <img src="logo.png">
  </h2>

  <!-- オープニングロール -->
  <div class="main-content">

    <div class="title-content">
      <p class="content-header">ここにEPISODE<br/>ここにタイトル</p>

      <br>

      <p class="content-body">
        ここに本文
      </p>

    </div>
  </div>
</div>