汉堡包头部动画不工作
WEB - Hamburger with animation not working in header
最近我在Codepen上看到一个汉堡包,并试图将它添加到我的网页标题中。当它被放置时,我的标题颜色布局变得疯狂。是否有可能在标题中放置一个带有动画的汉堡包?这是我在HTML
中给出的内容$(function() {
var activateHamburger = function(event) {
var el = $(this);
if (el.hasClass('active')) {
el.addClass('active-end');
el.one('transitionend', function() {
el.removeClass('active active-end')
});
} else {
el.addClass('active');
}
};
$('.hamburger').click(activateHamburger);
});
body {
background-color: #eee;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
line-height: 140%;
font-size: 0.9em;
}
.radial {
padding: 16px;
}
.header {
height: 200px;
background: #F44336;
}
.inner {
margin: 0 auto;
max-width: 600px;
margin: -170px auto 0 auto;
padding: 19px;
font-family: 'Roboto', sans-serif;
background: #fff;
border-radius: 0.125rem;
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
------------------------------hamburbger-starts-here *,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.hamburger {
*zoom: 1;
}
.hamburger:before,
.hamburger:after {
content: " ";
display: table;
}
.hamburger:after {
clear: both;
}
.hamburger {
cursor: pointer;
width: 30px;
height: 30px;
padding: 3px;
margin: 20px;
}
.hamburger > div {
background: #03A9F4;
height: 4px;
margin-bottom: 4px;
float: left;
width: 100%;
}
.hamburger > div:nth-child(1),
.hamburger > div:nth-child(3) {
float: right;
}
.hamburger.active {
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
-moz-transform: scale(1, 1) rotateZ(180deg) translate(0, 4px);
-ms-transform: scale(1, 1) rotateZ(180deg) translate(0, 4px);
-webkit-transform: scale(1, 1) rotateZ(180deg) translate(0, 4px);
transform: scale(1, 1) rotateZ(180deg) translate(0, 4px);
}
.hamburger.active > div {
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.hamburger.active > div:nth-child(1),
.hamburger.active > div:nth-child(3) {
width: 70%;
}
.hamburger.active > div:nth-child(2) {
width: 90%;
}
.hamburger.active > div:nth-child(1) {
-moz-transform: scale(1, 1) rotateZ(45deg) translate(2px, 2px);
-ms-transform: scale(1, 1) rotateZ(45deg) translate(2px, 2px);
-webkit-transform: scale(1, 1) rotateZ(45deg) translate(2px, 2px);
transform: scale(1, 1) rotateZ(45deg) translate(2px, 2px);
}
.hamburger.active > div:nth-child(3) {
-moz-transform: scale(1, 1) rotateZ(-45deg) translate(2px, -2px);
-ms-transform: scale(1, 1) rotateZ(-45deg) translate(2px, -2px);
-webkit-transform: scale(1, 1) rotateZ(-45deg) translate(2px, -2px);
transform: scale(1, 1) rotateZ(-45deg) translate(2px, -2px);
}
.hamburger.active.active-end {
-moz-transform: scale(1, 1) rotateZ(360deg) translate(0, 0);
-ms-transform: scale(1, 1) rotateZ(360deg) translate(0, 0);
-webkit-transform: scale(1, 1) rotateZ(360deg) translate(0, 0);
transform: scale(1, 1) rotateZ(360deg) translate(0, 0);
}
.hamburger.active.active-end > div {
width: 100%;
}
.hamburger.active.active-end > div:nth-child(1) {
-moz-transform: scale(1, 1) rotateZ(0deg) translate(0, 0);
-ms-transform: scale(1, 1) rotateZ(0deg) translate(0, 0);
-webkit-transform: scale(1, 1) rotateZ(0deg) translate(0, 0);
transform: scale(1, 1) rotateZ(0deg) translate(0, 0);
}
.hamburger.active.active-end > div:nth-child(3) {
-moz-transform: scale(1, 1) rotateZ(0deg) translate(0, 0);
-ms-transform: scale(1, 1) rotateZ(0deg) translate(0, 0);
-webkit-transform: scale(1, 1) rotateZ(0deg) translate(0, 0);
transform: scale(1, 1) rotateZ(0deg) translate(0, 0);
}
<header class="header">
<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<div class="radial">
<div class="inner">
<h2>TEST TEST TEST TEST TEST:</h2>
<ul>
<li>Test test test test test test test test test test test</li>
<li>Test test test test test test test test test test test</li>
<li>Test test test test test test test test test test test</li>
<li>Test test test test test test test test test test test</li>
<li>Test test test test test test test test test test test</li>
<li>Test test test test test test test test test test test</li>
<li>Test test test test test test test test test test test</li>
<li>Test test test test test test test test test test test</li>
<li>Test test test test test test test test test test test</li>
<li>Test test test test test test test test test test test</li>
</ul>
</div>
</div>
看看我在我的网页上尝试的codepen & &;这是我的JSFiddle DEMO
对我来说工作完美,(只是添加了JQuery 1.7.2和分支)。
Added JQuery 1.7.2 to the project.
http://jsfiddle.net/216201pg/你需要添加Jquery到你的项目;)
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
对于color Fix,将这些css属性添加到。hamburger类
margin-top: 0px;
padding-top: 12px;
http://jsfiddle.net/n597t74k/4/相关文章:
- 响应动画手风琴不工作
- html5画布动画无法正常工作
- 猫头鹰旋转木马2罐头't使渐变动画工作
- 我的动画没有按预期工作
- Jquery scrollTop动画不工作"无法读取属性'top'无风
- 对链接的 svg 进行动画处理不起作用;内联时工作正常
- Jquery动画函数不工作
- jQuery中基于画框的英雄动画是't工作
- 动画HTML5横幅工作在除Safari以外的一切
- 猫头鹰旋转木马2动画不工作
- JQuery动画打断了脚本,但如果没有它,脚本就可以工作
- jQuery动画工作,但并不总是
- fadeIn动画无法在IE中工作(所有版本)
- 动画速度滑块不工作
- jQuery+Animate.css动画只工作一次,动画不会重置
- 画布动画未按预期工作
- JavaScript库-WebGL-2D动画不工作
- 动画结束侦听器无法正常工作
- 如果 Ajax 请求太快,jQuery 动画将无法正常工作
- 停止动画停止工作,jQuery/悬停