【CSS3】壮大な宇宙にトリップできる[DarkForce.css]を紹介します。(1)TagsONZE株式会社オンズ企業サイトへMenu株式会社オンズ開発ブログ【CSS3】壮大な宇宙にトリップできる[DarkForce.css]を紹介します。【CSS3】壮大な宇宙にトリップできる[DarkForce.css]を紹介します。Google今日はオンズのオリジナルのスタイルシート[DarkForce.css]を紹介します。スターウォーズに登場する宇宙船に乗っているような感じで、壮大な宇宙の彼方にトリップしていけるCSSのテクニック。サンプルをご覧ください。CSS3[DarkForce.css]以下、[DarkForce.css]のキモの部分を解説します。HTMLの記述まずはHTMLの記述ですが、body要素の直下に以下のコードを記述します。id="d3"></div></div></div>body要素との組み合わせで、この3つのdiv要素がそれぞれ、背景の「星屑」を描画するレイヤーになります。CSSの読み込み続いてスタイルシートの設定ですが、こちらは配布している[DarkForce.css]を読み込むだけでOKです。[DarkForce.css]は先に紹介したサンプルのサイトからダウンロード可能です。内で以下のように記述します。href="darkforce.css"></head>基本的に、たったこれだけの設定で[DarkForce.css]が実装されます。スタイルシートの解説スタイルシートの中身をご覧いただければ一目瞭然ですが、[DarkForce.css]はCSS3の「perspective」プロパティをbody要素に効かせることからスタートしています。このとき、「animation-delay」プロパティをそれぞれの要素に指定して時間差で動くようにします。-90px;-webkit-animation-delay:-10s;-moz-animation-delay:-10s;-ms-animation-delay:-10s;-o-animation-delay:-10s;animation-delay:-10s;}奥行きのある遠近感を生む動きと緩やかな回転は「animation」プロパティと「@keyframes」で描画。「@keyframes」部分のCSSは下記のように設定しています。translateZ(300px);}}「opacity」が透明度の変化、「transform」が回転、「translateZ」が奥行きのある動きを司っています。CSS3を使っているので、古いブラウザには対応していません。最新のモダンブラウザが対象となっています。公開しているスタイルシートを読み込むだけの簡単な設定で実装できるので、初心者の方にもオススメできます。404エラーのページなどで利用してみてはいかがでしょうか。License)で、著作権表示をしていただければ誰でも無料で利用可能です。公開しているスタイルシートを読み込むだけの簡単な設定で実装できるので、初心者の方にもオススメできます。404エラーのページなどで利用してみてはいかがでしょうか。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【CSS】マウスカーソルの形状を変える。