当前位置：首页 > 网页特效 > 导航菜单

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

分类：导航菜单日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<link rel="stylesheet" href="css/style.css">
<script  src="js/index.js"></script>      
```  
#####  HTML结构
导航菜单的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>
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果