先來看看效果
tag.gif
首先我告訴你,這整個功能完全用 CSS
完成。沒有使用JS
,沒有使用圖片
夷蚊,沒有使用iconfont
或其它任何除CSS
以外的技術(shù)。
其次我告訴你它的HTML
結(jié)構(gòu)相當簡結(jié):
<div>
<input class="icon-menu" type="checkbox"/>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
最后我告訴你髓介,其實它的代碼量一定是你平生僅見之簡短:(這里僅寫整個功能結(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;
}
重點關(guān)注:
由于我的這個專欄是CSS圖形學惕鼓,所以我們暫時先不談其它,就說怎么寫一個導航圖標唐础?
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);
}
怎么樣呜笑,是不是很方便?記得點贊關(guān)注哦彻犁!