CSSだけで足踏みヒヨコ

CSSだけで足踏みするヒヨコを作りました。暇つぶしシリーズです。

See the Pen CSSだけで足踏みヒヨコ by kenyo_c (@kenyo_c) on CodePen.

コード解説
1. HTML解説
2. CSS解説
まとめ

コード解説

HTML解説

HTMLでは以下の3つの要素をコーディングしていきます。

ヒヨコちゃんを表示させるためのボックス
ヒヨコちゃんの顔
ヒヨコちゃんの左足・右足

<div id="chick">
  <div id="face"><span>▼</span></div>
  <div class="leg left"></div>
  <div class="leg right"></div>
</div>

ヒヨコちゃんを表示させるブロックは、id="chick"とゆう名前にして全体を囲みます。
その中に顔ブロックid="face"、左足class="left"、右足class="right"の3つを配置します。

ヒヨコちゃんの顔ブロックid="face"の中に、▼でくちばしになる要素を入れています。

※CSSの疑似要素 ::after と ::beforeを使ってヒヨコちゃんの目を表現したかったので、今回はくちばしを表現するためにspanを使いました。
（疑似要素は1つのセレクターにつき1つまでしか指定できないので…）

CSS解説

@keyframes footTap {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

#chick {
  position: relative;
  width: 50px;
  margin: 40vmin auto 0;
  &::before {
    content: "Ψ";
    position: absolute;
    top: -17px;
    left: 18px;
  }
}

#face {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: yellow;
  border-radius: 50%;
  z-index: 2;
  
  span {
    position: absolute;
    top: 16px;
    left: 17px;
    color: orange;
  }
  
  &::before {
    content: "・";
    position: absolute;
    top: 5px;
    left: 10px;
  }
  
  &::after {
    content: "・";
    position: absolute;
    top: 5px;
    right: 10px;
  }
}

.leg {
  width: 8px;
  height: 20px;
  background-color: orange;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  z-index: auto;
}

.leg.left {
  animation: footTap 1s infinite 0.5s;
  top: 45px;
  left: 12px;
}

.leg.right {
  animation: footTap 1s infinite 0.5s reverse;
  top: 45px;
  left: 30px;
}

CSSで、ヒヨコちゃんの見た目のスタイルと、足踏みする動きを@keyframesを使って指定していきます。
（ヒヨコちゃんの見た目のスタイルについてはあまり複雑なことをしていないので解説を省きます。）

@keyframes footTap {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframesで足を上下させる動きを指定します。
そして、左足のアニメーションの実行される方向を逆（reverse）にして、足が交互に動いているようにみせています。

まとめ

CSSの学び直しを兼ねて作ってみました。が、もうちょっとスマートに書ける方法がありましたらコメントにて教えて頂けますと嬉しいです！今後も時間があったらCSSでお絵描きシリーズをやっていきたいと思います…。時間があったら…。

コード解説

HTML解説

CSS解説

まとめ

comment