html Сендвичменюкнопка,превращаетсявкрестик

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Сендвичменюкнопка,превращаетсявкрестик相关的知识,希望对你有一定的参考价值。

.mobile-menu-button {
  display: block;
  color: $color-green;
  position: relative;
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 250ms ease-in-out;
    display: block;
    opacity: 1;
    width: 30px;
    height: 3px;
    background-color: $color-green;
  }
  span:nth-of-type(1) {
    margin: -9px 0 0;
  }
  span:nth-of-type(3) {
    margin: 9px 0 0;
  }

  &.active span:nth-of-type(1) {
    transform: translate(-50%, -50%) rotate(45deg);
    margin: 0;
  }
  &.active span:nth-of-type(2) {
    opacity: 0;
  }
  &.active span:nth-of-type(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
    margin: 0;
  }
}
$('#mobile-menu-button').click(function() {
    $(this).toggleClass('active');
});
<div id="mobile-menu-button" class="mobile-menu-button">
    <span></span>
    <span></span>
    <span></span>
</div>

以上是关于html Сендвичменюкнопка,превращаетсявкрестик的主要内容,如果未能解决你的问题,请参考以下文章

python Естьдваспискаразнойдлины。 Впервомсодержатсяключи,авовторомзначения。 Напишитефункцию,котораясо

vbscript МакросдляOfficeудаляющийвселичныеданные(Инспектор)вовсехфайлахвыбраннойпапки。

html Включить/ВыключитьвыводчанканастраницевзависимостиотсодержимогоTV-параметра

swift Запроснаконсультацию。 ПоследовательноеполучениекартинокизPFFileдлямассиваобъектовPFObject

sh Редактироватьконфигвредакторепоумолчанию。 Еслинезаданпараметр--global,торедактируется.git / confi

php Подключениеклассов(модулей)вБитрикс