先来看看效果
tag.gif
首先我告诉你, 这整个功能完全用 CSS 完成. 没有使用 JS, 没有使用图片, 没有使用 iconfont 或其它任何除 CSS 以外的技术.
其次我告诉你它的 html 结构相当简结:
- <div>
- <input class="icon-menu" type="checkbox"/>
- <ul>
- <li>111</li>
- <li>222</li>
- <li>333</li>
- </ul>
- </div>
最后我告诉你, 其实它的代码量一定是你平生仅见之简短:(这里仅写整个功能结构性代码)
- .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;
- }
重点关注:
由于我的这个专栏是 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);
- }
怎么样, 是不是很方便? 记得点赞关注哦!
来源: http://www.jianshu.com/p/b80808632d5c