卡卡網(wǎng)

在前文中，介紹了一個純CSS實現(xiàn)移動網(wǎng)頁導航打開/關閉切換按鈕動畫，本文再介紹一個開關切換(switch)按鈕動畫。

效果如圖

demodownload

實例介紹

純CSS建立的三橫線圖形，這是開關的默認樣式，此時導航為隱藏狀態(tài)。

當點擊三橫線圖形時，使用動畫過渡到一個叉的圖形，此時導航為打開狀態(tài)。

當點擊叉圖形時，導航變?yōu)殡[藏狀態(tài)，開關同樣通過動畫過渡切換到三橫線圖形。

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標簽為開關按鈕容器，svg標簽是圖形畫布，三個path，畫出三條橫線，而叉（X）是由其中兩條橫線旋轉組合而成。

CSS代碼

.menu設置開關按鈕的整體樣式。

.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設置圖形盒子樣式。

.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設置橫線樣式，注意有三條橫線，一個path畫一條橫線。

.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

本實例用了一點點JavaScript代碼，它主要實現(xiàn)點擊開關的動作事件。

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

總結

本文介紹了一個好看的純CSS移動網(wǎng)頁導航菜單開關切換(switch)按鈕動畫，喜歡的朋友可以直接下載源碼使用。

相關文章

• CSS 3D開關切換(switch)按鈕
• 純CSS實現(xiàn)移動網(wǎng)頁導航打開/關閉切換按鈕動畫
• 漂亮的CSS藍色單選框radio、復選框checkbox和開關switch按鈕
• 漂亮的純CSS3開關按鈕 (UISwitch)

標簽: 開關按鈕  切換開關  動畫按鈕  toggle-switch  UISwitch