卡卡網(wǎng)

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

效果如圖

demodownload

實例介紹

純CSS實現(xiàn)的三橫線圖形為導(dǎo)航菜單打開按鈕，點擊它打開導(dǎo)航菜單，這時該圖形變?yōu)橐粋€圓，圓內(nèi)是一個叉，代表這是個關(guān)閉導(dǎo)航按鈕，點擊它，導(dǎo)航菜單關(guān)閉，而該圖形又變?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標(biāo)簽是按鈕容器。

第4-7行代碼，一個div內(nèi)含兩個span標(biāo)簽，這是三條橫線的HTML代碼。

第8-13行代碼，是兩個svg畫布標(biāo)簽，這是建造一個圓和一個叉的圖形的HTML代碼。

CSS代碼

div div和div div span是設(shè)置三橫線圖形的樣式。

.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是設(shè)置圓和叉關(guān)閉按鈕圖形的樣式。

.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編程。

總結(jié)

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

相關(guān)文章

• 漂亮的CSS藍(lán)色單選框radio、復(fù)選框checkbox和開關(guān)switch按鈕
• 漂亮的純CSS3開關(guān)按鈕 (UISwitch)

標(biāo)簽: 動畫按鈕  按鈕  開關(guān)按鈕