先來看看效果

tag.gif

首先我告訴你，這整個功能完全用 CSS完成。沒有使用JS，沒有使用圖片，沒有使用iconfont或其它任何除CSS以外的技術(shù)。

其次我告訴你它的HTML結(jié)構(gòu)相當(dāng)簡結(jié):

<div>
  <input class="icon-menu" type="checkbox"/>
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>
</div>

最后我告訴你，其實(shí)它的代碼量一定是你平生僅見之簡短：（這里僅寫整個功能結(jié)構(gòu)性代碼）

.icon-menu {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: linear-gradient(0deg, transparent 42%, #454545 0%, #454545 57%, transparent 0%), linear-gradient(90deg, transparent 75%, #fff 76%), linear-gradient(0deg, transparent 10%, #454545 0%, #454545 25%, transparent 0%), linear-gradient(0deg, transparent 75%, #454545 0%, #454545 90%, transparent 0%);
  border-radius: 30%;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  transition: all .1s;
}

.icon-menu:active {
  transform: scale3d(.75, .75, 1);
}

.icon-menu:checked {
  background: linear-gradient(45deg, transparent 45%, #454545 0, #454545 55%, transparent 0), linear-gradient(-45deg, transparent 45%, #454545 0, #454545 55%, transparent 0);
}

.icon-menu + ul {
  opacity: 0;
  pointer-events: none;
  transition: all .6s;
}

.icon-menu:checked + ul {
  opacity: 1;
  pointer-events: auto;
}

重點(diǎn)關(guān)注：

由于我的這個專欄是CSS圖形學(xué)，所以我們暫時先不談其它，就說怎么寫一個導(dǎo)航圖標(biāo)？

231D57C3-D970-48DC-B5E3-E8AD1EE306DF.png

.icon-menu {
  background: linear-gradient(0deg, transparent 42%, #454545 0%, #454545 57%, transparent 0%), linear-gradient(90deg, transparent 75%, #fff 76%), linear-gradient(0deg, transparent 10%, #454545 0%, #454545 25%, transparent 0%), linear-gradient(0deg, transparent 75%, #454545 0%, #454545 90%, transparent 0%);
  border-radius: 30%;
}

然后又在需要的時候變化它的圖形

1DFA7707-F4D6-4CB8-8C2C-713F7CA028D5.png

.icon-menu:checked {
  background: linear-gradient(45deg, transparent 45%, #454545 0, #454545 55%, transparent 0), linear-gradient(-45deg, transparent 45%, #454545 0, #454545 55%, transparent 0);
}

怎么樣，是不是很方便？記得點(diǎn)贊關(guān)注哦！