どうも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制作のちょいテク詰め合わせ