卡卡網(wǎng)

在前文中，介紹了一個(gè)純CSS實(shí)現(xiàn)移動(dòng)網(wǎng)頁(yè)導(dǎo)航打開(kāi)/關(guān)閉切換按鈕動(dòng)畫(huà)，本文再介紹一個(gè)開(kāi)關(guān)切換(switch)按鈕動(dòng)畫(huà)。

效果如圖

demodownload

實(shí)例介紹

純CSS建立的三橫線圖形，這是開(kāi)關(guān)的默認(rèn)樣式，此時(shí)導(dǎo)航為隱藏狀態(tài)。

當(dāng)點(diǎn)擊三橫線圖形時(shí)，使用動(dòng)畫(huà)過(guò)渡到一個(gè)叉的圖形，此時(shí)導(dǎo)航為打開(kāi)狀態(tài)。

當(dāng)點(diǎn)擊叉圖形時(shí)，導(dǎo)航變?yōu)殡[藏狀態(tài)，開(kāi)關(guān)同樣通過(guò)動(dòng)畫(huà)過(guò)渡切換到三橫線圖形。

HTML代碼

<button class="menu">
    <svg viewBox="0 0 64 48">
        <path d="M19,15 L45,15 C70,15 58,-2 49.0177126,7 L19,37"></path>
        <path d="M19,24 L45,24 C61.2371586,24 57,49 41,33 L32,24"></path>
        <path d="M45,33 L19,33 C-8,33 6,-2 22,14 L45,37"></path>
    </svg>
</button>

button標(biāo)簽為開(kāi)關(guān)按鈕容器，svg標(biāo)簽是圖形畫(huà)布，三個(gè)path，畫(huà)出三條橫線，而叉（X）是由其中兩條橫線旋轉(zhuǎn)組合而成。

CSS代碼

.menu設(shè)置開(kāi)關(guān)按鈕的整體樣式。

.menu {
  --color: #fff;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  outline: none;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-appearence: none;
  -webkit-tap-highlight-color: transparent;
}

.menu svg設(shè)置圖形盒子樣式。

.menu svg {
  width: 64px;
  height: 48px;
  top: -6px;
  left: -14px;
  stroke: var(--color);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
  position: absolute;
}

.menu svg path設(shè)置橫線樣式，注意有三條橫線，一個(gè)path畫(huà)一條橫線。

.menu svg path {
  transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
  stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px);
  stroke-dashoffset: var(--offset, 126px);
  transform: translateZ(0);
}
.menu svg path:nth-child(2) {
  --duration: .7s;
  --easing: ease-in;
  --offset: 100px;
  --array-2: 74px;
}
.menu svg path:nth-child(3) {
  --offset: 133px;
  --array-2: 107px;
}

JavaScript

本實(shí)例用了一點(diǎn)點(diǎn)JavaScript代碼，它主要實(shí)現(xiàn)點(diǎn)擊開(kāi)關(guān)的動(dòng)作事件。

document.querySelectorAll('.menu').forEach(btn => {
  btn.addEventListener('click', e => {
    btn.classList.toggle('active');
  });
});

總結(jié)

本文介紹了一個(gè)好看的純CSS移動(dòng)網(wǎng)頁(yè)導(dǎo)航菜單開(kāi)關(guān)切換(switch)按鈕動(dòng)畫(huà)，喜歡的朋友可以直接下載源碼使用。

相關(guān)文章

• CSS 3D開(kāi)關(guān)切換(switch)按鈕
• 純CSS實(shí)現(xiàn)移動(dòng)網(wǎng)頁(yè)導(dǎo)航打開(kāi)/關(guān)閉切換按鈕動(dòng)畫(huà)
• 漂亮的CSS藍(lán)色單選框radio、復(fù)選框checkbox和開(kāi)關(guān)switch按鈕
• 漂亮的純CSS3開(kāi)關(guān)按鈕 (UISwitch)

標(biāo)簽: 開(kāi)關(guān)按鈕  切換開(kāi)關(guān)  動(dòng)畫(huà)按鈕  toggle-switch  UISwitch