首页>>导航菜单>>HTML5+svg手机图标菜单动画切换特效(2018-08-26)

HTML5+svg手机图标菜单动画切换特效

HTML5+svg手机图标菜单动画切换特效
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div class="container">  
  2.   
  3.     <div class="content">  
  4.         <div class="device">  
  5.             <div class="device__screen">  
  6.                 <div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;">  
  7.                     <svg width="1000px" height="1000px">  
  8.                         <path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800" style="stroke-dashoffset: 5803.15; stroke-dasharray: 2901.57, 2981.57, 240;"></path>  
  9.                         <path id="pathB" d="M 300 500 L 700 500" style="stroke-dashoffset: 800; stroke-dasharray: 400, 480, 240;"></path>  
  10.                         <path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200" style="stroke-dashoffset: 6993.11; stroke-dasharray: 3496.56, 3576.56, 240;"></path>  
  11.                     </svg>  
  12.                     <button id="menu-icon-trigger" class="menu-icon-trigger"></button>  
  13.                 </div><!-- menu-icon-wrapper -->  
  14.                 <div id="dummy" class="dummy">  
  15.                     <div class="dummy__item"></div>  
  16.                     <div class="dummy__item"></div>  
  17.                     <div class="dummy__item"></div>  
  18.                     <div class="dummy__item"></div>  
  19.                 </div><!-- /dummy -->  
  20.             </div><!-- /device-content -->  
  21.         </div><!-- /device -->  
  22. </div><!-- /content -->  
  23.   
  24.       
  25.     <div class="content">  
  26.         <div class="device device--alt">  
  27.             <div class="device__screen">  
  28.                 <div id="menu-icon-wrapper2" class="menu-icon-wrapper" style="visibility: visible;">  
  29.                     <svg width="1000px" height="1000px">  
  30.                         <path id="pathD" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800" style="stroke-dashoffset: 5803.15; stroke-dasharray: 2901.57, 2981.57, 240;"></path>  
  31.                         <path id="pathE" d="M 300 500 L 700 500" style="stroke-dashoffset: 800; stroke-dasharray: 400, 480, 240;"></path>  
  32.                         <path id="pathF" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200" style="stroke-dashoffset: 6993.11; stroke-dasharray: 3496.56, 3576.56, 240;"></path>  
  33.                     </svg>  
  34.                     <button id="menu-icon-trigger2" class="menu-icon-trigger"></button>  
  35.                 </div><!-- menu-icon-wrapper -->  
  36.                 <div id="dummy2" class="dummy">  
  37.                     <div class="dummy__item"></div>  
  38.                     <div class="dummy__item"></div>  
  39.                     <div class="dummy__item"></div>  
  40.                     <div class="dummy__item"></div>  
  41.                 </div><!-- /dummy -->  
  42.             </div><!-- /device-content -->  
  43.         </div><!-- /device -->  
  44.     </div><!-- /content -->  
  45.       
  46. </div><!-- /container -->  

 


原文地址:http://www.freejs.net/article_daohangcaidan_682.html