前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >脑洞真大!这个 CSS 库帮你做汉堡?

脑洞真大!这个 CSS 库帮你做汉堡?

原创
作者头像
程序员鱼皮
发布于 2021-04-25 15:41:03
发布于 2021-04-25 15:41:03
1.5K1
举报
文章被收录于专栏:鱼皮客栈鱼皮客栈

美味的 CSS 动画汉堡,要不要尝尝?

大家好,我是鱼皮,今天教大家做汉堡包。

当然不是真的汉堡包,毕竟我们这儿不是美食频道,而是指 HambergurMenu,汉堡包式菜单,由于菜单图标的三条横线酷似一个汉堡包,故得其名。

是不是很像?
是不是很像?

为了让网页更生动,当点击汉堡包菜单图标时,可以给它添加一个小动画。这不,有个国外的大神,专门开发了一个汉堡包菜单 CSS 动画库,库的名称就叫 Hamburgers

进入 Hamburgers 库的官网,可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标,即可查看效果,比如点击 Arrow 菜单图标,三条线会自然变化为箭头图标。

如何使用

该库的使用方式非常简单,由于是纯 CSS 实现,只需引入一个样式文件:

代码语言:txt
AI代码解释
复制
<link href="dist/hamburgers.css" rel="stylesheet">

引入样式文件后,先创建一个汉堡包菜单元素,添加一些特定的类名:

代码语言:txt
AI代码解释
复制
<button class="hamburger" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

然后从所有汉堡包风格中,选择一款自己喜欢的,再给上述汉堡包元素的最外层(含有 hamburger 类名)添加风格对应的类名,其他子元素保持不变即可。

比如我需要一个点击后折叠的汉堡菜单,对应的类名是 hamburger--collapse,则代码如下:

代码语言:txt
AI代码解释
复制
<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

不过此时,汉堡包还不能动,想要激活汉堡折叠动画,还需要再给最外层元素添加 is-active 类名,代码如下:

代码语言:txt
AI代码解释
复制
<button class="hamburger hamburger--collapse is-active" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

美中不足的是,需要我们自行通过 JavaScript 或 jQuery 等方式来动态地添加和删除 is-active 类名,以控制菜单的动画是否生效。不过这也是作者设计如此,希望让读者根据上下文做出最合适的选择。

更多用法

除了这种引入 CSS 文件的使用方式外,Hamburgers 还支持 npm、Bower 等主流的包管理器引入,并且支持 Sass 这一 CSS 扩展语言,甚至还支持 Ruby on Rails!

如果你想要覆盖 Hamburgers 的默认样式,只需要给相同的类名写样式覆盖即可,比如控制内边距:

代码语言:txt
AI代码解释
复制
hamburger-padding-x: 30px;

此外,Hamburgers 完美支持无障碍编程,给元素添加 aria-label 属性即可,具体可参见项目官网。


最后,看下这个库的浏览器兼容性,由于它使用了 CSS3 3D transforms,因此支持除 IE9 和 Opera Mini 外的所有主流浏览器。

目前项目也收获了超过 5000 个 star,可以放心食用!

🔍 项目地址:https://www.code-nav.cn/rd/?rid=17453ede60843d0e04015e05484ef4f5

编程导航 中还能发现更多优质编程学习资源,欢迎分享给有需要的同学吧!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
1 条评论
热度
最新
是不是有种抄袭的意味
是不是有种抄袭的意味
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
音视频八股文(6)-- ffmpeg大体介绍和内存模型
• AVUtil:核心工具库,下面的许多其他模块都会依赖该库做一些基本的音视频处理操作。
福大大架构师每日一题
2023/04/26
5140
音视频开发之旅(60) -调试分析FFmpeg (解封装部分的)常用结构体
工欲善其事,必先利其器,断点调试,对我们梳理流程排查问题十分重要,可以ffmpeg的调试可以在XCode、VS code以及QT等ide上进行方便的调试分析。本篇我们以XCode为例来先介绍下ffplay的断点调试,以ffmpeg4.4版本来进行分析。
音视频开发之旅
2021/12/04
9410
音视频开发之旅(60) -调试分析FFmpeg (解封装部分的)常用结构体
FFmepg 核心开发库及重要数据结构与API
本文介绍 FFmpeg 骨架:“八大金刚” 核心开发库,重要数据结构与 API
Gnep@97
2023/11/28
4010
FFmepg 核心开发库及重要数据结构与API
安卓ffmpeg_有什么好用的视频解码
将封装格式解压后可以得到压缩过的音视频等. 将压缩过的视频解压后可以得到 视频像素数据(RGB,YUV等).常见的视频压缩格式有H.264, MPEG4等…
全栈程序员站长
2022/11/08
1.6K0
安卓ffmpeg_有什么好用的视频解码
FFmpeg菜鸡互啄#第3篇#视频解码
解码过程 基本过程:打开输入文件,查找视频流,打开解码器,循环读帧解码帧,关闭解码器,关闭输入文件。 解码数据结构 Code #define _CRT_SECURE_NO_WARNINGS #i
_gongluck
2018/03/08
1.2K0
FFmpeg菜鸡互啄#第3篇#视频解码
音视频开发之旅(34) - 基于FFmpeg实现简单的视频解码器
FFmpeg解码涉及的知识点比较多,很容易被函数和结构体搞定不知所错,我们先从整体上对解码流程有个认知,画了张图把解码流程图,如下
音视频开发之旅
2021/02/28
1.4K0
5.FFMPEG-Qt移植ffmpeg、ffmpeg结构体介绍
https://blog.csdn.net/leixiaohua1020/article/details/11693997
诺谦
2020/08/31
8140
FFmpeg 4.x 从入门到精通(一)—— QT 中如何用 FFmpeg 实现软件解码
因为在2021年给自己定了目标和计划,学习ffmpeg,所以这篇文章是实现计划的第一步。
全栈程序员站长
2022/09/13
1.3K0
ffmpeg的H.264解码
FFmpeg_allluckly.cn.png 新建工程,导入由Mac编译ffmpeg获取FFmpeg-iOS编译好的FFmpeg-iOS,然后导入系统依赖的库 AudioToolbox.framework CoreMedia.framework VideoToolbox.framework libiconv.tbd libbz2.tbd libz.tbd 编译的时候报错: 'libavcodec/avcodec.h' file not found ,修改Header search paths 里的路径:
Bison
2018/07/04
1.8K0
FFmpeg菜鸡互啄#第4篇#音频解码
解码过程 音频解码跟上一篇的视频解码过程是一样的:打开输入文件,查找音频流,打开解码器,循环读帧解码帧,关闭解码器,关闭输入文件。 Code #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> /* #define __STDC_CONSTANT_MACROS #ifndef INT64_C #define INT64_C(c) (c ## LL) #define UINT64_C(c) (c ## ULL) #endif */ extern "C" {
_gongluck
2018/03/08
1.2K0
FFmpeg菜鸡互啄#第4篇#音频解码
音视频文件解码
音视频处理流程中讲解了音视频处理的流程(解复用、解码、渲染等),针对于解复用部分在音视频的那几个关键参数中已经提过了,本文不再赘述,本文将重点介绍解码的过程。
程序员的园
2024/11/28
1610
音视频文件解码
ffmpeg常用库、术语、API、数据结构总结
封装格式步骤: 1、分配解复用器上下文(avformat_alloc_context()); 2、根据url打开本地文件或网络流(avformat_open_input()); 3、读取媒体的数据包,查找流信息(avformat_find_stream_info()); 4、遍历数据 (4-1)、从文件中读取数据包(av_read_frame()); (4-2)、或者 定位文件位置进行遍历(avformat_seek_file()、av_seek_frame()); 5、关闭解复用器(avformat_close_input())或释放不使用的资源; ​
手撕代码八百里
2021/12/28
1.1K0
音视频开发之旅(61)- 分析FFmpeg (解码部分的)常用结构体
然后分别开启音频和视频的解码线程开始解码。我们可以看到涉及的主要结构体有AVCodecContext 、AVCodecParameters 、AVCodec 、AVFrame
音视频开发之旅
2021/12/05
7530
音视频开发之旅(61)- 分析FFmpeg (解码部分的)常用结构体
FFmpeg简易播放器的实现-最简版
下图引用自“雷霄骅,视音频编解码技术零基础学习方法”,因原图太小,看不太清楚,故重新制作了一张图片。
叶余
2019/04/02
1.5K0
FFmpeg简易播放器的实现-最简版
FFmpeg4.0+SDL2.0笔记01:Making Screencaps
背景:在系统性学习FFmpeg时,发现官方推荐教程还是15年的,不少接口已经弃用,大版本也升了一级,所以在这里记录下FFmpeg4.0+SDL2.0的学习过程。
非一
2021/04/06
6600
ffmpeg源码学习
• AVUtil:核心工具库,下面的许多其他模块都会依赖该库做一些基本的音视频处理操作。
vitofliu
2021/07/05
3.2K0
音视频开发之旅(35) -FFmpeg + AudioTrack 实现音频解码和播放
上一篇我们了解了FFmpeg解码流程、关键函数和结构体,实现了视频解码器。这篇我们来实现下音频的解码器。解码流程和视频的基本一致。FFmpeg解码的音频裸数据是PCM格式,android上播放PCM音频数据可以通过AudioTrack和OpenSL ES来实现。
音视频开发之旅
2021/03/02
2K0
音视频开发之旅(35) -FFmpeg + AudioTrack 实现音频解码和播放
Android FFmpeg音视频编码(十六)
上一章,我们了解ffmpeg的解封装,解码过程,这一章我们来了解一下ffmpeg是怎样进行编码,和封装工作的,工作流程如下图所示:
PengJie
2021/01/17
1.9K0
偶遇FFmpeg(番外)——FFmpeg花样编译入魔1之裁剪大小
在偶遇FFmpeg(三)——Android集成这边文章中曾经介绍过FFmpeg和Android的交叉编译。文章中也提到过如何裁剪SO文件大小的方式。 这边文章就这个问题。进行实战。
deep_sadness
2018/10/25
3.4K0
FFmpeg中的常用结构体分析
  在学习使用FFmpeg进行编解码时,我们有必要先去熟悉FFmpeg中的常用结构体,只有对它们的含义和用途有深刻的了解,我们才能为后面的学习打下坚实的基础。所以,这篇文章将会介绍这些常用的结构体有哪些,然后再介绍它们的具体用途。
故乡的樱花开了
2023/10/22
2990
相关推荐
音视频八股文(6)-- ffmpeg大体介绍和内存模型
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档