卡卡網(wǎng)

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

效果如圖

demodownload

實(shí)例介紹

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

第8-13行代碼，是兩個(gè)svg畫布標(biāo)簽，這是建造一個(gè)圓和一個(gè)叉的圖形的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

本實(shí)例無需用到JavaScript編程。

總結(jié)

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

相關(guān)文章

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

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