HTML & CSS » 网页汉堡包菜单之关闭按钮的六种玩法

网页汉堡包菜单之关闭按钮的六种玩法

发表于: HTML & CSS, 前端开发, 视觉设计. 评论
Sponsor

汉堡包菜单图标在APP或响应式设计上比较常见，一般用来展开/关闭网站导航菜单，然而这个菜单图标有很多新鲜的玩法，下面一起来看看网页菜单之关闭按钮的六种玩法，小创意，好体验。

网页汉堡包菜单之关闭按钮的六种玩法

第一种：伪元素 + 网页图标字体

TIPS: 点击图标下面的按钮，可以显示代码，可以直接复制到你的编辑体验。

Close menu 01

第二种：伪元素 + 三个HTML标签

Close menu 02

第三种：伪元素 + 1个HTML标签

Close menu 03

第四种：使用UNICODE编码

Close menu 04

第五种：SVG动画

Close menu 05

第六种：使用CSS背景属性

听起来有点不可思议，但确实是用CSS background属性实现的，不信请自行看代码！

Close menu 06

好了，看了这么有创意的关闭按钮，你有想法了没？直接COPY代码到你APP或网页上使用吧！点击下面的链接进入该网站。

网站地址：http://lukyvj.github.io/menu-to-cross-icon/

赞助商链接

与 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

{ 发表评论 }