其他代码

基于SVG超酷圆形导航菜单特效

也想出现在这里?联系我们
面包多

基于SVG超酷圆形导航菜单特效-创客云
这是一款基于 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>
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
也想出现在这里?联系我们
360uxc
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!