纯CSS实现移动网页导航打开/关闭切换按钮动画

技术频道 - html技术

纯CSS实现移动网页导航打开/关闭切换按钮动画

作者:admin 时间:2023-4-11 22:50:45 浏览:

本文介绍一个纯CSS实现的移动网页菜单打开和关闭切换按钮动画，动画过渡效果非常不错。

效果如图

demo download

实例介绍

纯CSS实现的三横线图形为导航菜单打开按钮，点击它打开导航菜单，这时该图形变为一个圆，圆内是一个叉，代表这是个关闭导航按钮，点击它，导航菜单关闭，而该图形又变为三横线。

HTML代码

<label class="toggle">
    <input type="checkbox">
    <div>
        <div>
            <span></span>
            <span></span>
        </div>
        <svg>
            <use xlink:href="#path">
        </svg>
        <svg>
            <use xlink:href="#path">
        </svg>
    </div>
</label>

label标签是按钮容器。

第4-7行代码，一个div内含两个span标签，这是三条横线的HTML代码。

第8-13行代码，是两个svg画布标签，这是建造一个圆和一个叉的图形的HTML代码。

CSS代码

div div和div div span是设置三横线图形的样式。

.toggle input + div div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.5s ease;
}
.toggle input + div div span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
}

div svg是设置圆和叉关闭按钮图形的样式。

.toggle input + div svg {
  display: block;
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
  width: 44px;
  height: 44px;
  stroke-linecap: round;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -22px 0 0 -22px;
  stroke-dasharray: 0 82.801 8 82.801;
  stroke-dashoffset: 82.801;
  transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
  transform: scale(1);
  transition: stroke-dashoffset 0.5s ease, stroke-dasharray 0.6s ease, transform 0.5s ease, stroke 0.4s ease;
}