svg导航菜单动画特效
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - SVG Hamburger Menu Icon Animation Collection</title> <style> #container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .box { width: 33.3333%; height: 50%; float: left; } .icon { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; } /******** PALETTES ********/ /*** Faint Grays ***/ /* #b1 { background: #FFFFFF; } #b2 { background: #F8F8F8; } #b3 { background: #EFEFEF; } #b4 { background: #E8E8E8; } #b5 { background: #DFDFDF; } #b6 { background: #D8D8D8; } .icon { stroke: #000000; opacity: .65; } */ /*** Peach ***/ #b1 { background: #fc5c65; } #b2 { background: #fd9644; } #b3 { background: #fed330; } #b4 { background: #eb3b5a; } #b5 { background: #fa8231; } #b6 { background: #f7b731; } .icon { stroke: #FFFFFF; opacity: .95; } /*** Lime ***/ /* #b1 { background: #76F5A7; } #b2 { background: #93E87B; } #b3 { background: #DFE87B; } #b4 { background: #87FF94; } #b5 { background: #D1FF93; } #b6 { background: #FFF687; } .icon { stroke: #FFFFFF; opacity: 1; } */ /*** Rainbow & Whites ***/ /* #b1 { background: #f1c40f; } #b2 { background: #1fe0ba; } #b3 { background: #3ebb2a; } #b4 { background: #2980b9; } #b5 { background: #e74c3c; } #b6 { background: #8e44ad; } .icon { stroke: #FFFFFF; opacity: .9; } */ /*** Rainbow & Darks ***/ /* #b1 { background: #f1c40f; } #b2 { background: #1fe0ba; } #b3 { background: #3ebb2a; } #b4 { background: #2980b9; } #b5 { background: #e74c3c; } #b6 { background: #8e44ad; } .icon { stroke: #000000; opacity: .5; } */ </style> </head> <body translate="no"> <div id="container"> <div id="b1" class="box"> <svg id="i1" class="icon" viewBox="0 0 100 100"> <path id="top-line-1" d="M30,37 L70,37 Z"></path> <path id="middle-line-1" d="M30,50 L70,50 Z"></path> <path id="bottom-line-1" d="M30,63 L70,63 Z"></path> </svg> </div> <div id="b2" class="box"> <svg id="i2" class="icon" viewBox="0 0 100 100"> <path id="top-line-2" d="M30,37 L70,37 Z"></path> <path id="middle-line-2" d="M30,50 L70,50 Z"></path> <path id="bottom-line-2" d="M30,63 L70,63 Z"></path> </svg> </div> <div id="b3" class="box"> <svg id="i3" class="icon" viewBox="0 0 100 100"> <path id="top-line-3" d="M30,37 L70,37 Z"></path> <path id="middle-line-3" d="M30,50 L70,50 Z"></path> <path id="bottom-line-3" d="M30,63 L70,63 Z"></path> </svg> </div> <div id="b4" class="box"> <svg id="i4" class="icon" viewBox="0 0 100 100"> <polyline id="top-line-4" points="30 37 50 37 70 37"></polyline> <path id="middle-line-4" d="M30,50 L70,50 Z"></path> <path id="bottom-line-4" d="M30,63 L70,63 Z"></path> </svg> </div> <div id="b5" class="box"> <svg id="i5" class="icon" viewBox="0 0 100 100"> <path id="top-line-5" d="M30,37 L70,37 Z"></path> <path id="middle-line-5" d="M30,50 L70,50 Z"></path> <path id="bottom-line-5" d="M30,63 L70,63 Z"></path> </svg> </div> <div id="b6" class="box"> <svg id="i6" class="icon" viewBox="0 0 100 100"> <path id="top-line-6" d="M30,37 L70,37 Z"></path> <path id="middle-line-6" d="M30,50 L70,50 Z"></path> <path id="bottom-line-6" d="M30,63 L70,63 Z"></path> </svg> </div> </div> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/animateAnything.js"></script> <script> ///////////////////////////////////////////////////// ///////////////////// ICON 1 ////////////////////// ///////////////////////////////////////////////////// ///Initiation Variables var icon_1 = document.getElementById("b1"); var topLine_1 = document.getElementById("top-line-1"); var middleLine_1 = document.getElementById("middle-line-1"); var bottomLine_1 = document.getElementById("bottom-line-1"); var state_1 = "menu"; // can be "menu" or "arrow" var topLineY_1; var middleLineY_1; var bottomLineY_1; var topLeftY_1; var topRightY_1; var bottomLeftY_1; var bottomRightY_1; var topLeftX_1; var topRightX_1; var bottomLeftX_1; var bottomRightX_1; ///Animation Variables var segmentDuration_1 = 15; var menuDisappearDurationInFrames_1 = segmentDuration_1; var arrowAppearDurationInFrames_1 = segmentDuration_1; var arrowDisappearDurationInFrames_1 = segmentDuration_1; var menuAppearDurationInFrames_1 = segmentDuration_1; var menuDisappearComplete_1 = false; var arrowAppearComplete_1 = false; var arrowDisappearComplete_1 = false; var menuAppearComplete_1 = false; var currentFrame_1 = 1; ///Menu Disappear function menuDisappearAnimation_1() { currentFrame_1++; if (currentFrame_1 <= menuDisappearDurationInFrames_1) { window.requestAnimationFrame(() => { //top line topLineY_1 = AJS.easeInBack(37, 50, menuDisappearDurationInFrames_1, currentFrame_1); topLine_1.setAttribute("d", "M30," + topLineY_1 + " L70," + topLineY_1); //bottom line bottomLineY_1 = AJS.easeInBack(63, 50, menuDisappearDurationInFrames_1, currentFrame_1); bottomLine_1.setAttribute("d", "M30," + bottomLineY_1 + " L70," + bottomLineY_1); //recursion menuDisappearAnimation_1(); }); } else { middleLine_1.style.opacity = "0"; currentFrame_1 = 1; menuDisappearComplete_1 = true; openMenuAnimation_1(); } } ///Cross Appear function arrowAppearAnimation_1() { currentFrame_1++; if (currentFrame_1 <= arrowAppearDurationInFrames_1) { window.requestAnimationFrame(() => { //top line topLeftX_1 = AJS.easeOutBack(30, 35, arrowAppearDurationInFrames_1, currentFrame_1); topLeftY_1 = AJS.easeOutBack(50, 35, arrowAppearDurationInFrames_1, currentFrame_1); bottomRightX_1 = AJS.easeOutBack(70, 65, arrowAppearDurationInFrames_1, currentFrame_1); bottomRightY_1 = AJS.easeOutBack(50, 65, arrowAppearDurationInFrames_1, currentFrame_1); topLine_1.setAttribute("d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1); //bottom line bottomLeftX_1 = AJS.easeOutBack(30, 35, arrowAppearDurationInFrames_1, currentFrame_1); bottomLeftY_1 = AJS.easeOutBack(50, 65, arrowAppearDurationInFrames_1, currentFrame_1); topRightX_1 = AJS.easeOutBack(70, 65, arrowAppearDurationInFrames_1, currentFrame_1); topRightY_1 = AJS.easeOutBack(50, 35, arrowAppearDurationInFrames_1, currentFrame_1); bottomLine_1.setAttribute("d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1); //recursion arrowAppearAnimation_1(); }); } else { currentFrame_1 = 1; arrowAppearComplete_1 = true; openMenuAnimation_1(); } } ///Combined Open Menu Animation function openMenuAnimation_1() { if (!menuDisappearComplete_1) { menuDisappearAnimation_1(); } else if (!arrowAppearComplete_1) { arrowAppearAnimation_1(); } } ///Cross Disappear function arrowDisappearAnimation_1() { currentFrame_1++; if (currentFrame_1 <= arrowDisappearDurationInFrames_1) { window.requestAnimationFrame(() => { //top line topLeftX_1 = AJS.easeInBack(35, 30, arrowDisappearDurationInFrames_1, currentFrame_1); topLeftY_1 = AJS.easeInBack(35, 50, arrowDisappearDurationInFrames_1, currentFrame_1); bottomRightX_1 = AJS.easeInBack(65, 70, arrowDisappearDurationInFrames_1, currentFrame_1); bottomRightY_1 = AJS.easeInBack(65, 50, arrowDisappearDurationInFrames_1, currentFrame_1); topLine_1.setAttribute("d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1); //bottom line bottomLeftX_1 = AJS.easeInBack(35, 30, arrowDisappearDurationInFrames_1, currentFrame_1); bottomLeftY_1 = AJS.easeInBack(65, 50, arrowDisappearDurationInFrames_1, currentFrame_1); topRightX_1 = AJS.easeInBack(65, 70, arrowDisappearDurationInFrames_1, currentFrame_1); topRightY_1 = AJS.easeInBack(35, 50, arrowDisappearDurationInFrames_1, currentFrame_1); bottomLine_1.setAttribute("d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1); //rec.........完整代码请登录后点击上方下载按钮下载查看
网友评论0