【SASS】【CSS3】ハンバーガーボタンに動きをつける
ハンバーガーメニューで動きのあるものを見つけて、これいいなぁと思ってたので、ちょうど今日コーディング依頼があったのでサクっと作ってみました。つっても全部SASSです。例のごとくsampleなどは面倒なのでないです。そのうち、このブログにも反映させとうかなー。できたてほっかほかですよー。(byライスの人)
動きとしては、クリックすると2個目の棒線が消え、1個目・3個目の線が斜めにアニメーションするようになっています。
SASS
@mixin anime { -moz-transition: -moz-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; transition: transform 0.1s linear; } @mixin rotate($rotate : -10){ -webkit-transform: rotate($rotate + deg); -moz-transform: rotate($rotate + deg); -o-transform: rotate($rotate + deg); -ms-transform: rotate($rotate + deg); transform: rotate($rotate + deg); } @mixin button { display:block; width:40px; height:40px; border:none; @include kadomaru(10px); background:$color5; @include abs-tr(25,15); span { display:block; height:3px; width:90%; margin:5px auto; background:$white; @include kadomaru(5px); @include anime; @include rotate(0); } } @mixin buttonclose { span:nth-child(2) { display:none; } span:nth-child(1) { @include anime; @include rotate(-45); position:relative; top:4px; } span:nth-child(3) { @include anime; @include rotate(45); position:relative; top:-4px; } } button { display:block; @include button; } button.close { @include buttonclose; }
HTML
<button><span></span><span></span><span></span></button>