CSSを使って自分好みの動くアイコンを作る

9878 ワード
keyframes HTML5 animation CSS3 HTML5 テキストリンク

はじめに

どうしてもアニメーションで動く猫の肉球ボタンが欲しかったので自分で作ってみました。

作ったもの

定期的に光って、マウスオーバーで肉球が回転します。


See the Pen
cat paw icon by すえ (@skane_26)
on CodePen.


HTMLの説明

全体的にはこんな感じ。上のHTMLと見比べてみてください。

大きくわけて[paw-icon]と[paw]の土台となるクラスが二つあって、[paw-icon]には肉球まわりの円、[paw]には肉球をかいてます。
* paw-icon

* paw

cssとアニメーション

円

.circle {
  position: relative;
  /*円の横幅*/
  width: 120px;
  /**円の縦幅*/
  height: 120px;
  /**角のまるさ*/
  border-radius: 50%;
  background: white; /*背景色*/
  /**テキストを中心に*/
  text-align: center;
  /*文字の高さ:hightとあわせる*/
  line-height: 120px;
  /**塗りつぶしじゃなくて線にする*/
  border: solid 3px darkgray;
  margin-left: auto;
  margin-right: auto;
　/**アニメーション*/
  animation: Flash 2s infinite;
}

[animation: Flash 2s infinite;]で@keyframesで指定されているFlashという名前のアニメーションをよんでいます。
2s:2秒かけてアニメーションを実行
infinite:無限に実行、数値を与えるとその回数実行

@keyframes Flash {
  50% {
    box-shadow: 0px 0px 10px 0px rgb(103, 189, 223);
  }
}

0%:開始時
100%:終了時
としてある段階での動きを指定すると、アニメーションとして動きます
この場合0%,100%は指定していないので初期状態。
50%の時にbox-shadowの効果が出ます。
[0%:初期状態→50%:青く光る→100%初期状態]
アニメーションに関してはこちらがわかりやすいです。
【CSS3】@keyframes と animation 関連のまとめ

肉球

手の平のほうの肉球はもう少し良い形にしたかったのですが、難しかったので長方形の角を丸くしたものを2つ重ねました。

.paw-center {
  position: absolute;
  z-index: 999;
  width: 30%;
  height: 50%;
  border-radius: 50px;
  background: #ccc;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 10%;
}
.paw-bottom {
  z-index: 998;
  position: absolute;
  width: 65%;
  height: 35%;
  border-radius: 70px;
  background: #ccc;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 10%;
}

border-radiusで角が丸っこくなります。
z-indexは、それぞれのcssどちらを前面するかを指定できます。数字が大きいほうが前面になります。

指のほうの肉球の形は手のひらと同じような感じです。
指には角度を付けました。

.nikukyu1 {
  position: absolute;
  transform: rotate(-35deg);
  top: 30%;
  left: 8%;
}

transformで角度をつけれます。
transform: rotateX(35deg);でX軸向き
transform: rotateY(35deg);でY軸向きへの回転も可能です。

肉球のまわるアニメーション

powのクラス、肉球が全部乗ってる土台ごと回転させます。
マウスオーバー時に回転させたいのでhoverをつけてアニメーションを呼び出します。

.paw:hover {
  animation: kaiten 1.5s linear 1;
}

@keyframes kaiten {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

rotateYなのでY軸で回転します。
0%の時は0degなので回転なし。
100%の時は180degなので180°回転した状態になります。
また、 1.5sなので0~100%を1.5秒で実行します。

まとめ

今回は記事にしていませんが、css,htmlは配置(position:absolute;等)が結構難しくて苦戦しました。
アニメーションは動くのでめちゃくちゃ楽しいです。