以下是 12款CSS3汉堡包按钮变形动画特效css代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12款CSS3汉堡包按钮变形动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row cf">
<div class="three col">
<div class="hamburger" id="hamburger-1">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-2">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-3">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-4">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row cf">
<div class="three col">
<div class="hamburger" id="hamburger-5">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-6">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-7">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-8">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row cf">
<div class="three col">
<div class="hamburger" id="hamburger-9">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-10">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-11">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-12">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".hamburger").click(function(){
$(this).toggleClass("is-active");
});
});
</script>
</body>
</html>
CSS代码(style.css):
html,body{width:100%;height:100%;margin:0;padding:0;font-family:'Open Sans',sans-serif;}
a{text-decoration:none;}
p,li,a{font-size:14px;}
/* GRID */
.twelve{width:100%;}
.eleven{width:91.53%;}
.ten{width:83.06%;}
.nine{width:74.6%;}
.eight{width:66.13%;}
.seven{width:57.66%;}
.six{width:49.2%;}
.five{width:40.73%;}
.four{width:32.26%;}
.three{width:23.8%;}
.two{width:15.33%;}
.one{width:6.866%;}
/* COLUMNS */
.col{display:block;float:left;margin:1% 0 1% 1.6%;}
.col:first-of-type{margin-left:0;}
.container{width:100%;max-width:940px;margin:0 auto;position:relative;text-align:center;}
/* CLEARFIX */
.cf:before,.cf:after{content:" ";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}
/* ALL */
.row .three{padding:80px 30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#2c3e50;color:#ecf0f1;text-align:center;}
.hamburger .line{width:50px;height:5px;background-color:#ecf0f1;display:block;margin:8px auto;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.hamburger:hover{cursor:pointer;}
/* ONE */
#hamburger-1.is-active .line:nth-child(2){opacity:0;}
#hamburger-1.is-active .line:nth-child(1){-webkit-transform:translateY(13px) rotate(45deg);-ms-transform:translateY(13px) rotate(45deg);-o-transform:translateY(13px) rotate(45deg);transform:translateY(13px) rotate(45deg);}
#hamburger-1.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(-45deg);-ms-transform:translateY(-13px) rotate(-45deg);-o-transform:translateY(-13px) rotate(-45deg);transform:translateY(-13px) rotate(-45deg);}
/* TWO */
#hamburger-2.is-active .line:nth-child(1){-webkit-transform:translateY(13px);-ms-transform:translateY(13px);-o-transform:translateY(13px);transform:translateY(13px);}
#hamburger-2.is-active .line:nth-child(3){-webkit-transform:translateY(-13px);-ms-transform:translateY(-13px);-o-transform:translateY(-13px);transform:translateY(-13px);}
/* THREE */
#hamburger-3.is-active .line:nth-child(1),#hamburger-3.is-active .line:nth-child(3){width:40px;}
#hamburger-3.is-active .line:nth-child(1){-webkit-transform:translateX(-10px) rotate(-45deg);-ms-transform:translateX(-10px) rotate(-45deg);-o-transform:translateX(-10px) rotate(-45deg);transform:translateX(-10px) rotate(-45deg);}
#hamburger-3.is-active .line:nth-child(3){-webkit-transform:translateX(-10px) rotate(45deg);-ms-transform:translateX(-10px) rotate(45deg);-o-transform:translateX(-10px) rotate(45deg);transform:translateX(-10px) rotate(45deg);}
/* FOUR */
#hamburger-4.is-active .line:nth-child(1),#hamburger-4.is-active .line:nth-child(3){width:40px;}
#hamburger-4.is-active .line:nth-child(1){-webkit-transform:translateX(10px) rotate(45deg);-ms-transform:translateX(10px) rotate(45deg);-o-transform:translateX(10px) rotate(45deg);transform:translateX(10px) rotate(45deg);}
#hamburger-4.is-active .line:nth-child(3){-webkit-transform:translateX(10px) rotate(-45deg);-ms-transform:translateX(10px) rotate(-45deg);-o-transform:translateX(10px) rotate(-45deg);transform:translateX(10px) rotate(-45deg);}
/* FIVE */
#hamburger-5.is-active{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
#hamburger-5.is-active .line:nth-child(2){-webkit-transition:none;-o-transition:none;transition:none;}
#hamburger-5 .line:nth-child(2){-webkit-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s;}
#hamburger-5.is-active .line:nth-child(2){opacity:0;}
#hamburger-5.is-active .line:nth-child(1),#hamburger-5.is-active .line:nth-child(3){width:35px;-webkit-transform-origin:right;-moz-transform-origin:right;-ms-transform-origin:right;-o-transform-origin:right;transform-origin:right;}
#hamburger-5.is-active .line:nth-child(1){-webkit-transform:translateY(15px) rotate(45deg);-ms-transform:translateY(15px) rotate(45deg);-o-transform:translateY(15px) rotate(45deg);transform:translateY(15px) rotate(45deg);}
#hamburger-5.is-active .line:nth-child(3){-webkit-transform:translateY(-15px) rotate(-45deg);-ms-transform:translateY(-15px) rotate(-45deg);-o-transform:translateY(-15px) rotate(-45deg);transform:translateY(-15px) rotate(-45deg);}
/* SIX */
#hamburger-6.is-active{-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transition-delay:0.6s;-o-transition-delay:0.6s;transition-delay:0.6s;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
#hamburger-6.is-active .line:nth-child(2){width:0px;}
#hamburger-6.is-active .line:nth-child(1),#hamburger-6.is-active .line:nth-child(3){-webkit-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s;}
#hamburger-6.is-active .line:nth-child(1){-webkit-transform:translateY(13px);-ms-transform:translateY(13px);-o-transform:translateY(13px);transform:translateY(13px);}
#hamburger-6.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(90deg);-ms-transform:translateY(-13px) rotate(90deg);-o-transform:translateY(-13px) rotate(90deg);transform:translateY(-13px) rotate(90deg);}
/* SEVEN */
#hamburger-7.is-active .line:nth-child(1){width:30px;}
#hamburger-7.is-active .line:nth-child(2){width:40px;}
#hamburger-7.is-active .line{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg);}
/* EIGHT */
#hamburger-8.is-active .line:nth-child(2){opacity:0;}
#hamburger-8.is-active .line:nth-child(1){-webkit-transform:translateY(13px);-ms-transform:translateY(13px);-o-transform:translateY(13px);transform:translateY(13px);}
#hamburger-8.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(90deg);-ms-transform:translateY(-13px) rotate(90deg);-o-transform:translateY(-13px) rotate(90deg);transform:translateY(-13px) rotate(90deg);}
/* NINE */
#hamburger-9{position:relative;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
#hamburger-9.is-active{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
#hamburger-9:before{content:"";position:absolute;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:70px;height:70px;border:5px solid transparent;top:calc(50% - 35px);left:calc(50% - 35px);border-radius:100%;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
#hamburger-9.is-active:before{border:5px solid #ecf0f1;}
#hamburger-9.is-active .line{width:35px;}
#hamburger-9.is-active .line:nth-child(2){opacity:0;}
#hamburger-9.is-active .line:nth-child(1){-webkit-transform:translateY(13px);-ms-transform:translateY(13px);-o-transform:translateY(13px);transform:translateY(13px);}
#hamburger-9.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(90deg);-ms-transform:translateY(-13px) rotate(90deg);-o-transform:translateY(-13px) rotate(90deg);transform:translateY(-13px) rotate(90deg);}
/* TEN */
#hamburger-10{-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
#hamburger-10.is-active{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
#hamburger-10.is-active .line:nth-child(1){width:30px}
#hamburger-10.is-active .line:nth-child(2){width:40px}
/* ELEVEN */
#hamburger-11{-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
#hamburger-11.is-active{animation:smallbig 0.6s forwards;}
@keyframes smallbig{0%,100%{-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
50%{-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);}
}
#hamburger-11.is-active .line:nth-child(1),#hamburger-11.is-active .line:nth-child(2),#hamburger-11.is-active .line:nth-child(3){-webkit-transition-delay:0.2s;-o-transition-delay:0.2s;transition-delay:0.2s;}
#hamburger-11.is-active .line:nth-child(2){opacity:0;}
#hamburger-11.is-active .line:nth-child(1){-webkit-transform:translateY(13px) rotate(45deg);-ms-transform:translateY(13px) rotate(45deg);-o-transform:translateY(13px) rotate(45deg);transform:translateY(13px) rotate(45deg);}
#hamburger-11.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(-45deg);-ms-transform:translateY(-13px) rotate(-45deg);-o-transform:translateY(-13px) rotate(-45deg);transform:translateY(-13px) rotate(-45deg);}
/* TWELVE */
#hamburger-12.is-active .line:nth-child(1){opacity:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);}
#hamburger-12.is-active .line:nth-child(3){opacity:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);}
分享到QQ
分享到微博
微信扫一扫
