【初心者でもわかる】+で作る、開閉ボタンの作り方（2パターン）

どうも7noteです。開閉ボタンの+マークに使うアニメーションパターンを2つ

クリックやタップで「+ボタンを押すと開閉するボックス」を作る際に使える+ボタンのアニメーションを作成します。

まずは原型となる+ボタンをCSSで作成していきます。

ソース

まずは今回のベースとなる基本形の+マークを作成します。

index.html

<div class="btn"></div>

style.css

.btn {
  width: 20px;
  height: 20px;
  position: relative;
}
.btn::before {
  content: '';
  width: 100%;
  height: 2px;
  display: inline-block;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .5s;
}
.btn::after {
  content: '';
  width: 2px;
  height: 100%;
  display: inline-block;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .5s;
}

script.js

$(function(){
  $(".btn").on("click", function(){
    $(this).toggleClass("open");
  });
});

「回転してマイナスになる」

style.css

/* 以下を追記 */
.btn.open::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

「回転して✕になる」

style.css

.btn.open::before,
.btn.open::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

まとめ

開閉させるボタンはWEBサイトではよく使うので、コピペで使えるように記事にまとめました。
他のパターンも少しずつ増やしていければと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ