1
最近我在Codepen看到了一個漢堡，並試圖將其添加到我的網頁標題中。當它被放置時，我的標題顏色佈局變得瘋狂。是否可以在動畫中放置漢堡包？ 這是我在HTML給WEB - 動畫無法在標題中的漢堡包
$(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
你可以發佈你的代碼沒有漢堡獲得之前的參考嗎？ –