卡卡網

本文介紹一個純CSS實現(xiàn)的移動網頁菜單打開和關閉切換按鈕動畫，動畫過渡效果非常不錯。

效果如圖

demodownload

實例介紹

純CSS實現(xiàn)的三橫線圖形為導航菜單打開按鈕，點擊它打開導航菜單，這時該圖形變?yōu)橐粋€圓，圓內是一個叉，代表這是個關閉導航按鈕，點擊它，導航菜單關閉，而該圖形又變?yōu)槿龣M線。

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;
}

JavaScript

本實例無需用到JavaScript編程。

總結

本文介紹了純CSS實現(xiàn)移動網頁導航菜單打開和關閉切換按鈕動畫，效果非常不錯，樣式和動畫比較大眾化但又不失美觀，一般的移動網頁都可以使用。

相關文章

• 漂亮的CSS藍色單選框radio、復選框checkbox和開關switch按鈕
• 漂亮的純CSS3開關按鈕 (UISwitch)

標簽: 動畫按鈕  按鈕  開關按鈕