汉堡式折叠html,3种超酷汉堡包菜单按钮变形动画特效
这是一款使用CSS3和少量jQuery代码来完成的汉堡包菜单按钮变形动画特效。该特效使用CSS3 transition 和 transform 来完成变形动画效果,使用jQuery来触发按钮点击事件。
HTML结构
该汉堡包按钮的HTML结构非常简单,使用嵌套
CSS样式
作为汉堡包菜单按钮的包裹容器div.menu元素设置了固定的宽度和高度,定位方式为相对定位,显示方式display为内联块级元素。并设置1秒钟的过渡动画时间。
.menu {
width: 80px;
height: 80px;
position: relative;
transition-duration: 1s;
display: inline-block;
margin: 40px;
cursor: pointer;
}
.icon元素是汉堡包菜单按钮,它的:before和:after伪元素分别用于制作上下两条横线。
.icon {
height: 14px;
width: 80px;
top: 30px;
background-color: #F8FFE9;
border-radius: 20px;
position: absolute;
transition-duration: 0.5s;
}
.icon:before {
left: 0;
position: absolute;
top: -25px;
height: 14px;
width: 80px;
background-color: #F8FFE9;
content: "";
border-radius: 20px;
transition-duration: 0.5s;
}
.icon:after {
left: 0;
position: absolute;
top: 25px;
height: 14px;
width: 80px;
background-color: #F8FFE9;
content: "";
border-radius: 20px;
transition-duration: 0.5s;
}
当汉堡包按钮被点击的时候,容器元素被使用jQuery来添加.open或burger1-open class类,3种汉堡包菜单按钮此时会分别使用transition和transform来制作不同的动画。
.burger2.open .icon {
transition-duration: 0.1s;
transition-delay: 0.5s;
background: transparent;
}
.burger2.open .icon:before {
transition: top 0.5s, transform 0.5s 0.5s;
top: 0px;
transform: rotateZ(-45deg);
}
.burger2.open .icon:after {
transition: top 0.4s, transform 0.5s 0.5s;
top: 0px;
transform: rotateZ(45deg);
}
.burger3.open .icon {
background: transparent;
}
.burger3.open .icon:before {
transition: transform 0.5s;
transform: rotateZ(45deg) translate(15px, 20px);
}
.burger3.open .icon:after {
transition: transform 0.5s;
transform: rotateZ(-405deg) translate(15px, -20px);
}
JavaScript
特效中使用jQuery代码来在点击按钮是切换相应的class类。
$(document).ready(function(){
$(".burger1").click(function(){
$(".burger1").toggleClass("burger1-open");
})
$(".burger2").click(function(){
$(".burger2").toggleClass("open");
})
$(".burger3").click(function(){
$(".burger3").toggleClass("open");
})
})
汉堡式折叠html,3种超酷汉堡包菜单按钮变形动画特效相关推荐
- html隐藏汉堡按钮,12种汉堡包图标按钮变形动画特效
插件描述:这是一款使用jquery和css3制作的炫酷汉堡包按钮变形动画特效.这组特效共12种动画效果,分别是在用户点击汉堡包按钮之后,汉堡包按钮以不同的方式执行变形动画. 图标按钮变形说明 这是一款 ...
- html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览 源码下载 使用方法 HTML ...
- 汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构 该按钮变形动画使用嵌套 的H ...
- css3特效框,科技常识:6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效 的相关资料,希望小伙伴们看了有所帮助. ...
- html文字变成汉堡插件,一组超酷汉堡包图标变形动画特效
Hamburgers是一款效果超酷的汉堡包图标变形动画特效CSS3动画库.这组汉堡包图标动画包括18种不同的汉堡包变形动画效果,你还可以通过Sass文件来自定义你自己的汉堡包图标变形动画. 安装 你可 ...
- 20P27 Premiere预设70种超酷电影级白天黑夜调色预设模板
20P27 Premiere预设70种超酷电影级白天黑夜调色预设模板下载 [预设介绍] 该Lumetri色彩预设包含70个用于Premiere Pro的超酷电影色彩预设.它包括白天或晚上的视频的不同预 ...
- VB打造超酷个性化菜单(一)
VB打造超酷个性化菜单(一) 众所周知,MS Office 2003推出已经有一段时间了,但我们依然不会忘记Office XP刚刚推出时其令人耳目一新的菜单给我们留下的深刻印象.突起的悬浮式图标,不同 ...
- 免费素材下载:超酷的简单按钮UI
日期:2012-4-23 来源:GBin1.com 今天分享一套来自alessioatzeni的超棒简单按钮UI,包含了2个主题的5个类型的按钮.提供了PSD格式的下载,所有的元素都是矢量格式,你可 ...
- html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效 文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
最新文章
- UCenter实现同步登陆原理
- 基于OHCI的USB主机 —— 寄存器(其它)
- Python3算法基础练习:编程100例( 21~ 25)
- Java Word break analysis
- 使用While循环语句值得注意的事
- STM32----通用定时器TIM2~TIM5的三种功能
- C# 关闭主窗口后让所有线程都停止工作
- 《转》Android 今日头条屏幕适配方案终极版正式发布!
- html 关于一行两列 高度不定的实现(不用table)
- numpy.reshape
- Python帮助文档
- Inceptor JDBC 连接案例程序
- EdrawMax Crack,跨平台图表软件
- canvas学习之-七色板
- 智能眼镜的“减熵式增长”
- 智能家居雷声越来越大 雨点还是那么小
- feign扫描_Feign基础入门及特性讲解
- 设计模式(七)——适配器模式
- 尺取法 — 详解 + 例题模板(全)
- python基础教程怎么看_python基础教程之看一篇,学一篇,今日份的pand
热门文章
- ktt算法 约化_svm算法 最通俗易懂讲解
- 显卡的性能看哪些参数?
- java如何用雪花算法批量生成唯一编码(保证位数不过长)?
- Codeforces Global Round 21 E. Placing Jinas
- flutter微信分享,qq分享
- android+隐藏邮件地址,“通过 Apple 登录”功能的“隐藏邮件地址”
- 倍福ADS通讯(三)——ADS通讯协议包格式
- 佐切的第二天学习分享
- Sitecore 8.2 防火墙规则的权威指南
- 中国移动云mas短信http协议对接