专栏首页蚂蚁开源社区【前端艺术】超酷圆形导航菜单特效(基于SVG)

【前端艺术】超酷圆形导航菜单特效(基于SVG)

简要教程


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

使用方法


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

<link rel="stylesheet" href="css/style.css">
<script  src="js/index.js"></script>

HTML结构


导航菜单的HTML结构如下:

<div class="main">
<div class="navigation-circle">
<div class="navigation-circle__inner">
<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;">
<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>
</svg>
<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;">
<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>
</svg>
<ul class="navigation-circle__list">
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(1)" onmouseenter="calculateOffset(1)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #1
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(2)" onmouseenter="calculateOffset(2)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #2
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(3)" onmouseenter="calculateOffset(3)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #3
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(4)" onmouseenter="calculateOffset(4)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #4
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(5)" onmouseenter="calculateOffset(5)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #5
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(6)" onmouseenter="calculateOffset(6)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #6
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(7)" onmouseenter="calculateOffset(7)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #7
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
</ul>
</div>
</div>
</div>

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:蚂蚁社区小编

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 世界已经无法阻挡Python入侵。

    很多人对学英语都感到崩溃,但最近山东的小学生又要学习一门“语言”—Python,除了山东在小学教材中加入Python外,今年浙江省高中信息技术教材改革项目中,也...

    用户5997198
  • 前端常见技术点 - CSS / DOM / 布局(43问)

    这里总结一下 WEB 前端面试 CSS 部分的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级...

    用户5997198
  • CSS3 animation属性 实现地球转动

    用户5997198
  • list.append只是暂时改变列表

    bye
  • python3-集合

    py3study
  • JAVA 集合list,Map删除元素的方法总结

    这种方式的问题在于,删除某个元素后,list的大小发生了变化,而你的索引也在变化,所以会导致你在遍历的时候漏掉某些元素。比如当你删除第1个元素后,继续根据索引访...

    traffic
  • 人生苦短:Python里的17个超赞操作

    有时候,当我们要交换两个变量的值时,一种常规的方法是创建一个临时变量,然后用它来进行交换。比如:

    一墨编程学习
  • 安利一波Python编程中非常实用的那些黑魔法

    编者按:Python是机器学习的主流语言,没有之一。今年5月,它首次在PYPL排行榜上超越JAVA,成为全球第一大编程语言。而一个月后,Stack Overfl...

    猫咪编程
  • 《Kotlin 极简教程 》第5章 集合类(1)

    本章将介绍Kotlin标准库中的集合类,我们将了解到它是如何扩展的Java集合库,使得写代码更加简单容易。如果您熟悉Scala的集合库,您会发现Kotlin跟S...

    一个会写诗的程序员
  • 「数学or算法?」每周学习心得 & 本周更新计划

    刚刚过去的是:假借「作业」这个理由不去更新的第三周。但也是上大学以来,从未有过的、无比舒适的一周。

    Piper蛋窝

扫码关注云+社区

领取腾讯云代金券