按鈕 icon 變化

手機常見的選單按鈕開啟與關閉的動態

按鈕 icon 預設為常見的 humburger 三條線,點擊之後以動態方式變成 ⨉

重點:

  1. $('.icon').click(function () {
         $('.icon').toggleClass('active');
    }); //狀態切換
  2. 三條線的位置以絕對位置捉取
  3. 轉變成⨉的動態
    #dailycss_20210726 .icon.active .hamburger:before {
        top: 0;
        transform: rotate(45deg);
    }
    #dailycss_20210726 .icon.active .hamburger:after {
        top: 0;
        transform: rotate(135deg);
    }

效果演示:

 

HTML 與 JQUERY:

<!doctype html>
<html>
<head>
<title>手機選單開啟按鈕 ICON 變化</title>
<link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20210726">
<div class="icon">
<div class="hamburger"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function () {
$('.icon').click(function () {
$('.icon').toggleClass('active');
});
});
</script>
</body>
</html>

 

CSS:

#dailycss_20210726 {
    margin: 0;
    padding: 0;
    background: #ff5c40;
}

#dailycss_20210726 .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    cursor: pointer;
}

#dailycss_20210726 .hamburger {
    width: 50px;
    height: 6px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: .5s;
}

#dailycss_20210726 .hamburger:before,
#dailycss_20210726 .hamburger:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 6px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: .5s;
}

#dailycss_20210726 .hamburger:before {
    top: -16px;
}

#dailycss_20210726 .hamburger:after {
    top: 16px;
}

#dailycss_20210726 .icon.active .hamburger {
    background: rgba(0, 0, 0, 0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

#dailycss_20210726 .icon.active .hamburger:before {
    top: 0;
    transform: rotate(45deg);
}

#dailycss_20210726 .icon.active .hamburger:after {
    top: 0;
    transform: rotate(135deg);
}

 

來源:




 迴響列表

目前還沒有任何留言


 留言表單

如果想要使用回覆功能,或是刪除修改自己的留言,可以登入網站後再來留言。

🧨 Method Illuminate\View\View::__toString() must not throw an exception, caught ParseError: syntax error, unexpected 'array' (T_ARRAY), expecting function (T_FUNCTION) or const (T_CONST)