<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <META NAME="COPYRIGHT"CONTENT="http://codepen.io/RRoberts/pen/ZBYaJr"> <title>Hamburger Icon Animations</title> <style type="text/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%); } </style> </head> <body> <div class="container"> <h1>Hamburger Icon Animations</h1> <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> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".hamburger").click(function(){ $(this).toggleClass("is-active"); }); }); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 图标动画 Hamburger Icon Animations 喜欢 (0)or分享 (0)
