您的当前位置:首页正文

jQuery和CSS3超炫汉堡包变形动画特效

2020-11-27 来源:爱站旅游

简要教程

这是一款使用jQuery和CSS3来制作的炫酷汉堡包变形动画特效。该特效通过通过jQuery来附加按钮事件,并通过CSS3 transform和animation来制作动画特效。

使用方法

HTML结构

该汉堡包变形动画特效的HTML结构如下:

<div class='container'>
 <div class='burger'>
 <div class='burger__line-top'></div>
 <div class='burger__line-mid'></div>
 <div class='burger__menu'>
 <p>MENU</p>
 </div>
 </div>
</div>

CSS样式

汉堡包菜单按钮的基本样式如下:

.burger {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 width: 71px;
 height: 71px;
 cursor: pointer;
}
.burger__line-top {
 width: 100%;
 height: 8px;
 border-radius: 5px;
 background-color: #fff;
 box-shadow: 0 0 1px 0 #fff;
}
.burger__line-mid {
 margin-top: 17px;
 width: 100%;
 height: 8px;
 border-radius: 5px;
 background-color: #fff;
 box-shadow: 0 0 1px 0 #fff;
}
.burger__menu {
 margin-top: 10px;
}
.burger__menu p {
 text-align: center;
 font-size: 20px;
 font-family: 'Open Sans', sans-serif;
 font-weight: 900;
 color: #fff;
 text-shadow: 0 0 1px #fff;
 letter-spacing: 3px;
}

在样式中使用了6个animation动画:activeTop、activeMid、activeMenu、reverseTop、reverseMid和reverseMenu。分别用于汉堡包按钮的变形和返回初始状态。

JavaScript

该特效使用jQuery代码来为相应的元素添加和移除相应的class类,并为汉堡包按钮绑定鼠标点击事件。

'use strict';
$(document).ready(function () {
 var $burger = $('.burger'),
 $topLine = $('.burger__line-top'),
 $midLine = $('.burger__line-mid'),
 $menuLine = $('.burger__menu'),
 anim = false;
 
 var changeClasses = {
 addActive: function addActive() {
 for (var i = 0; i <= 2; i++) {
 $burger.children().eq(i).removeClass('reverseLine' + (i + 1)).addClass('activeLine' + (i + 1));
 }
 },
 addReverse: function addReverse() {
 for (var i = 0; i <= 2; i++) {
 $burger.children().eq(i).removeClass('activeLine' + (i + 1)).addClass('reverseLine' + (i + 1));
 }
 }
 };
 
 var timeouts = {
 initial: function initial(child, Y, rot, scale) {
 $burger.children().eq(child).css('transform', 'translateY(' + Y + 'px) rotate(' + rot + 'deg) scale(' + scale + ',1)');
 },
 afterActive: function afterActive() {
 var _this = this;
 
 // ES6
 setTimeout(function () {
 _this.initial(0, 12, 45, 1.40);
 _this.initial(1, -12, -45, 1.40);
 _this.initial(2, 35, 0, 1);
 $burger.children().eq(2).css('opacity', '0');
 anim = true;
 }, 1300);
 },
 beforeReverse: function beforeReverse() {
 var _this2 = this;
 
 setTimeout(function () {
 for (var i = 0; i <= 2; i++) {
 _this2.initial(i, 0, 0, 1);
 }
 $burger.children().eq(2).css('opacity', '1');
 anim = false;
 }, 1300);
 }
 };
 
 $burger.on('click', function () {
 if (!anim) {
 changeClasses.addActive();
 timeouts.afterActive();
 } else if (anim) {
 changeClasses.addReverse();
 timeouts.beforeReverse();
 }
 });
});
显示全文