查看: 385|回复: 1

[HTML5动画] 超酷圆形导航菜单特效(基于SVG)

[复制链接]
发表于 2019-8-1 21:12:09 | 显示全部楼层 |阅读模式
123.gif



简要教程


这是一款基于SVG的超酷圆形导航菜单特效。该导航菜单通过SVG进行布局,然后通过js和CSS代码来在鼠标hover菜单时,制作菜单项的动画效果。

使用方法


在页面中引入style.css和index.js文件。

  1. <link rel="stylesheet" href="css/style.css">
  2. <script  src="js/index.js"></script>  
复制代码
HTML结构


导航菜单的HTML结构如下:
  1. <div class="main">
  2. <div class="navigation-circle">
  3. <div class="navigation-circle__inner">
  4. <svg class="navigation-circle-svg navigation-circle-svg--opaque" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 320 320" style="enable-background:new 0 0 320 320;">
  5. <circle cx="160" cy="160" r="158" fill="none" stroke-width="1" stroke="#c644fc" stroke-linecap="round" stroke-miterlimit="10" style="stroke-dashoffset:0;stroke-dasharray:none;"></circle>
  6. </svg>
  7. <svg class="navigation-circle-svg navigation-circle-svg--mask" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 320 320" style="enable-background:new 0 0 320 320;">
  8. <circle id="mask-circle" cx="160" cy="160" r="158" fill="none" stroke-width="2" stroke="#c644fc" stroke-linecap="round" stroke-miterlimit="10" style="stroke-dasharray:1005.3088px;"></circle>
  9. </svg>
  10. <ul class="navigation-circle__list">
  11. <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(1)" onmouseenter="calculateOffset(1)" onMouseLeave="onMouseLeave()">
  12. <div class="navigation-circle-list-item__meta">
  13. <h3 class="navigation-circle-list-item__title">Item #1
  14. </h3>
  15. <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
  16. </div></a></li>
  17. <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(2)" onmouseenter="calculateOffset(2)" onMouseLeave="onMouseLeave()">
  18. <div class="navigation-circle-list-item__meta">
  19. <h3 class="navigation-circle-list-item__title">Item #2
  20. </h3>
  21. <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
  22. </div></a></li>
  23. <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(3)" onmouseenter="calculateOffset(3)" onMouseLeave="onMouseLeave()">
  24. <div class="navigation-circle-list-item__meta">
  25. <h3 class="navigation-circle-list-item__title">Item #3
  26. </h3>
  27. <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
  28. </div></a></li>
  29. <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(4)" onmouseenter="calculateOffset(4)" onMouseLeave="onMouseLeave()">
  30. <div class="navigation-circle-list-item__meta">
  31. <h3 class="navigation-circle-list-item__title">Item #4
  32. </h3>
  33. <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
  34. </div></a></li>
  35. <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(5)" onmouseenter="calculateOffset(5)" onMouseLeave="onMouseLeave()">
  36. <div class="navigation-circle-list-item__meta">
  37. <h3 class="navigation-circle-list-item__title">Item #5
  38. </h3>
  39. <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
  40. </div></a></li>
  41. <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(6)" onmouseenter="calculateOffset(6)" onMouseLeave="onMouseLeave()">
  42. <div class="navigation-circle-list-item__meta">
  43. <h3 class="navigation-circle-list-item__title">Item #6
  44. </h3>
  45. <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
  46. </div></a></li>
  47. <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(7)" onmouseenter="calculateOffset(7)" onMouseLeave="onMouseLeave()">
  48. <div class="navigation-circle-list-item__meta">
  49. <h3 class="navigation-circle-list-item__title">Item #7
  50. </h3>
  51. <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
  52. </div></a></li>
  53. </ul>
  54. </div>
  55. </div>
  56. </div>
复制代码
源码下载

游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2019-8-2 15:10:38 | 显示全部楼层
看起来效果还真是不错啊!喜欢!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表