卡卡网

在前文中，介绍了一个纯CSS实现移动网页导航打开/关闭切换按钮动画，本文再介绍一个开关切换(switch)按钮动画。

效果如图

demodownload

实例介绍

纯CSS建立的三横线图形，这是开关的默认样式，此时导航为隐藏状态。

当点击三横线图形时，使用动画过渡到一个叉的图形，此时导航为打开状态。

当点击叉图形时，导航变为隐藏状态，开关同样通过动画过渡切换到三横线图形。

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代码，它主要实现点击开关的动作事件。

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

总结

本文介绍了一个好看的纯CSS移动网页导航菜单开关切换(switch)按钮动画，喜欢的朋友可以直接下载源码使用。

相关文章

• CSS 3D开关切换(switch)按钮
• 纯CSS实现移动网页导航打开/关闭切换按钮动画
• 漂亮的CSS蓝色单选框radio、复选框checkbox和开关switch按钮
• 漂亮的纯CSS3开关按钮 (UISwitch)

标签: 开关按钮  切换开关  动画按钮  toggle-switch  UISwitch