おりゃーうりゃー!CSSだけで忍者に手裏剣を投げさせてみた

By@mtoksuyOn 2013年05月30日

Tag To
つくってみた
CSS
忍者
手裏剣

いやーもうそろそろ夏っすね。女子の浴衣にドキッとくる季節ですね。

彼女居ませんが。

さて、タイトル通りなんですが、CSSだけで忍者くんに手裏剣を投げさせてみました。意外に楽しかったので公開してみたいと思います。

この子に投げさせてみたよ

●

可愛いでしょ?(自分で言うな)夜な夜なレイヤーを重ね合わせこの子は生まれました。

まぁ、僕なんですが。

この記事を書く為に忍者セットを作成したんですが、意外にも手裏剣を作るのが大変でした。3レイヤーで出来てます。

レスポンシブ化しようとしましたがめんどくさくなって固定にしました。固定良いよ固定。

目次に戻る

実装方法

参考にしたサイト

CSS アニメーション - CSS | MDN

さて、実装方法ですがCSS3のアニメーションを利用して動かしています。

ロジック的には キーフレーム という CSS3アニメーションの機能を使い、左手やら手裏剣やらを個別にアニメーション指定をして手裏剣を投げています。

もっと時間をかければ面白い挙動が出来そうですね。

一応コードも載せときます。

HTML

<div class="ninja_space">
  <div class="anime">
    <div class="maru"><a href="http://programmerbox.com/">●</a></div>
  </div>
  <div class="ninja"></div> <!-- 忍者 -->
  <div class="left_hand"></div> <!-- 左手 -->
  <div class="syuriken"></div> <!-- 手裏剣 -->
</div>

CSS

body {
  overflow-x: hidden; /* 横のスクロールバーを隠す */
}
.ninja_space {
  position: relative;
}
/* 忍者本体 */
.ninja {
    background-image: url("my_ninja_1_left_1.png");
    background-repeat: no-repeat;
    width: 400px;
    height: 400px;
    position: relative;
    top: 9px; /* 調整用 */
    left: 8px; /* 調整用 */
    z-index: 3;
}
/* 左手 */
.left_hand {
    background-image: url("left_hand_1.png");
    background-repeat: no-repeat;
    width: 29px;
    height: 55px;
    position: absolute;
    top: 277px;
    left: 237px;
    z-index: 2;
 
    /* 角度 */
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
 
    /* アニメーションの時間 */
    -webkit-animation-duration: 3s;
       -moz-animation-duration: 3s;
        -ms-animation-duration: 3s;
         -o-animation-duration: 3s;
            animation-duration: 3s;
 
    /* キーフレーム指定 */
    -webkit-animation-name: left_hand; 
       -moz-animation-name: left_hand;
        -ms-animation-name: left_hand;
         -o-animation-name: left_hand;
            animation-name: left_hand;
 
    /* アニメーションを繰り返す */
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
/* Chrome Safari用 */
@-webkit-keyframes left_hand {
  from {
 
  }
  10% {
    -webkit-transform: rotate(-50deg);
    left: 243px;
    top: 270px;
  }
  15% {
    -webkit-transform: rotate(-20deg);
    left: 240px;
    top: 274px;
  }
  to {
    -webkit-transform: rotate(0deg);
    left: 237px;
    top: 277px;
  }
}
/* Firefox用 */
@-moz-keyframes left_hand {
  from {
 
  }
  10% {
    -moz-transform: rotate(-50deg);
    left: 243px;
    top: 270px;
  }
  15% {
    -moz-transform: rotate(-20deg);
    left: 240px;
    top: 274px;
  }
  to {
    -moz-transform: rotate(0deg);
    left: 237px;
    top: 277px;
  }
}
/* IE用だけど意味なし 一応記述 */
@-ms-keyframes left_hand {
  from {
 
  }
  10% {
    -ms-transform: rotate(-50deg);
    left: 243px;
    top: 270px;
  }
  15% {
    -ms-transform: rotate(-20deg);
    left: 240px;
    top: 274px;
  }
  to {
    -ms-transform: rotate(0deg);
    left: 237px;
    top: 277px;
  }
}
/* Opera用(古いバージョン用に) */
@-o-keyframes left_hand {
  from {
 
  }
  10% {
    -o-transform: rotate(-50deg);
    left: 243px;
    top: 270px;
  }
  15% {
    -o-transform: rotate(-20deg);
    left: 240px;
    top: 274px;
  }
  to {
    -o-transform: rotate(0deg);
    left: 237px;
    top: 277px;
  }
}
/* 適応ブラウザ用 */
@keyframes left_hand {
  from {
 
  }
  10% {
    transform: rotate(-50deg);
    left: 243px;
    top: 270px;
  }
  15% {
    transform: rotate(-20deg);
    left: 240px;
    top: 274px;
  }
  to {
    transform: rotate(0deg);
    left: 237px;
    top: 277px;
  }
}
/* 手裏剣 */
.syuriken {
    background-image: url("syuriken_1.png");
    background-repeat: no-repeat;
    height: 50px;
    left: 231px;
    position: absolute;
    top: 300px;
    width: 50px;
    z-index: 3;
 
    /* 角度 */
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
 
    /* アニメーションの時間 */
    -webkit-animation-duration: 3s;
       -moz-animation-duration: 3s;
        -ms-animation-duration: 3s;
         -o-animation-duration: 3s;
            animation-duration: 3s;
 
    /* キーフレーム指定 */
    -webkit-animation-name: syuriken;
       -moz-animation-name: syuriken;
        -ms-animation-name: syuriken;
         -o-animation-name: syuriken;
            animation-name: syuriken;
 
    /* アニメーションを繰り返す */
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
/* Chrome Safari用 */
@-webkit-keyframes syuriken {
  from {
   
  }
  10% {
    -webkit-transform: rotate(-50deg);  
    left: 247px;
    top: 283px;
  }
  to {
    -webkit-transform: rotate(1000deg);
    left: 1500px;
    top: 0px;
  }
}
/* Firefox用 */
@-moz-keyframes syuriken {
  from {
   
  }
  10% {
    -moz-transform: rotate(-50deg); 
    left: 247px;
    top: 283px;
  }
  to {
    -moz-transform: rotate(1000deg);
    left: 1500px;
    top: 0px;
  }
}
/* IE用だけど意味なし 一応記述 */
@-ms-keyframes syuriken {
  from {
   
  }
  10% {
    -ms-transform: rotate(-50deg);  
    left: 247px;
    top: 283px;
  }
  to {
    -ms-transform: rotate(1000deg);
    left: 1500px;
    top: 0px;
  }
}
/* Opera用(古いバージョン用に) */
@-o-keyframes syuriken {
  from {
   
  }
  10% {
    -o-transform: rotate(-50deg); 
    left: 247px;
    top: 283px;
  }
  to {
    -o-transform: rotate(1000deg);
    left: 1500px;
    top: 0px;
  }
}
/* 適応ブラウザ用 */
@keyframes syuriken {
  from {
   
  }
  10% {
    transform: rotate(-50deg);  
    left: 247px;
    top: 283px;
  }
  to {
    transform: rotate(1000deg);
    left: 1500px;
    top: 0px;
  }
}