CSS3和SVG实现的圆环菜单动画

于 2023-04-27 18:38:06 发布
阅读量401 收藏 3
点赞数
分类专栏： 小游戏 文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ithunzi/article/details/130412793
版权 
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3和SVG实现的圆环菜单动画</title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:200,400" rel="stylesheet"> <!--核心-->
  <style>
    @charset "UTF-8";

    * {
      margin: 0;
      padding: 0;
      border: 0;
      outline: none;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }

    html,
    body {
      height: 100vh;
      width: 100vw;
      background-color: #000;
    }

    .main {
      display: flex;
      height: 100vh;
      width: 100vw;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .navigation-circle {
      display: block;
      position: relative;
      height: 320px;
      width: 320px;
      margin: auto;
    }

    .navigation-circle__inner {
      display: block;
      position: relative;
      height: 100%;
      width: 100%;
    }

    .navigation-circle__list {
      display: block;
      position: absolute;
      height: 320px;
      width: 320px;
      transform: rotate(-90deg);
      animation: 2.2s cubic-bezier(0.25, -0.25, 0.35, 1) 0 1 animate-in-list forwards;
    }

    .navigation-circle-svg {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transform: rotateZ(-90deg);
    }

    .navigation-circle-svg--opaque {
      opacity: 0.5;
    }

    .navigation-circle-svg--mask circle {
      transition: all 0.5s ease;
      transition-delay: 0.5s;
      animation: 2.2s ease 0 1 animate-in-svg-circle-mask backwards;
    }

    .navigation-circle-list-item {
      display: block;
      position: absolute;
      height: 0;
      width: calc(50% + 16px);
      top: 50%;
      left: 50%;
      list-style: none;
      transform-origin: 0 0;
    }

    .navigation-circle-list-item__point {
      display: block;
      position: absolute;
      height: 32px;
      width: 32px;
      top: -16px;
      right: 2px;
      cursor: pointer;
      transform: scale(0);
    }

    .navigation-circle-list-item__point:before {
      content: "•";
      display: block;
      position: absolute;
      height: 32px;
      width: 32px;
      top: 0;
      color: #c644fc;
      background-color: #000;
      font-size: 12px;
      font-weight: 400;
      line-height: 32px;
      text-align: center;
      border: 2px solid #c644fc;
      border-radius: 50%;
      box-shadow: inset 0px 0px 0px 0px #c644fc;
      transform: scale(0.75);
      transition: all 0.5s ease;
    }

    .navigation-circle-list-item__point:after {
      content: "";
      display: block;
      position: absolute;
      height: 1px;
      width: 0px;
      top: 18px;
      left: 31px;
      background-color: #c644fc;
      transition: all 0.5s ease;
    }

    .navigation-circle-list-item__meta {
      display: block;
      position: absolute;
      overflow: hidden;
      opacity: 0;
      transform-origin: center;
      margin-left: 78px;
      min-width: 128px;
      padding: 4px;
    }

    .navigation-circle-list-item__title {
      display: block;
      color: #f7f7f7;
      text-align: left;
      font-size: 14px;
      border-bottom: 1px solid #f7f7f7;
      padding-bottom: 4px;
      margin-bottom: 6px;
    }

    .navigation-circle-list-item__subtitle {
      display: block;
      color: #f7f7f7;
      text-align: center;
      font-weight: 200;
      font-size: 12px;
    }

    .navigation-circle-list-item:nth-of-type(1) {
      transform: rotateZ(calc((360deg / 7) * 1));
    }

    .navigation-circle-list-item:nth-of-type(1) .navigation-circle-list-item__meta {
      transform: rotateZ(38.5714285714deg);
    }

    .navigation-circle-list-item:nth-of-type(1) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(2) {
      transform: rotateZ(calc((360deg / 7) * 2));
    }

    .navigation-circle-list-item:nth-of-type(2) .navigation-circle-list-item__meta {
      transform: rotateZ(-12.8571428571deg);
    }

    .navigation-circle-list-item:nth-of-type(2) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.2s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(3) {
      transform: rotateZ(calc((360deg / 7) * 3));
    }

    .navigation-circle-list-item:nth-of-type(3) .navigation-circle-list-item__meta {
      transform: rotateZ(-64.2857142857deg);
    }

    .navigation-circle-list-item:nth-of-type(3) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.4s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(4) {
      transform: rotateZ(calc((360deg / 7) * 4));
    }

    .navigation-circle-list-item:nth-of-type(4) .navigation-circle-list-item__meta {
      transform: rotateZ(-115.7142857143deg);
    }

    .navigation-circle-list-item:nth-of-type(4) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.6s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(5) {
      transform: rotateZ(calc((360deg / 7) * 5));
    }

    .navigation-circle-list-item:nth-of-type(5) .navigation-circle-list-item__meta {
      transform: rotateZ(-167.1428571429deg);
    }

    .navigation-circle-list-item:nth-of-type(5) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.8s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(6) {
      transform: rotateZ(calc((360deg / 7) * 6));
    }

    .navigation-circle-list-item:nth-of-type(6) .navigation-circle-list-item__meta {
      transform: rotateZ(-218.5714285714deg);
    }

    .navigation-circle-list-item:nth-of-type(6) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 1s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(7) {
      transform: rotateZ(calc((360deg / 7) * 7));
    }

    .navigation-circle-list-item:nth-of-type(7) .navigation-circle-list-item__meta {
      transform: rotateZ(-270deg);
    }

    .navigation-circle-list-item:nth-of-type(7) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 1.2s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:hover .navigation-circle-list-item__point:before {
      transform: scale(1);
      font-size: 16px;
    }

    .navigation-circle-list-item:hover .navigation-circle-list-item__point:after {
      width: 32px;
      left: 34px;
    }

    .navigation-circle-list-item:hover .navigation-circle-list-item__meta {
      opacity: 1;
    }

    .navigation-circle-list-item:active .navigation-circle-list-item__point:before,
    .navigation-circle-list-item.active .navigation-circle-list-item__point:before {
      transform: scale(0.85);
      color: #000;
      box-shadow: inset 0px 0px 0px 16px #c644fc;
      border-color: transparent;
    }

    .navigation-circle-list-item:active .navigation-circle-list-item__point:after,
    .navigation-circle-list-item.active .navigation-circle-list-item__point:after {
      width: 34px;
      left: 32px;
    }

    .navigation-circle-list-item:active .navigation-circle-list-item__meta,
    .navigation-circle-list-item.active .navigation-circle-list-item__meta {
      opacity: 1;
    }

    @keyframes animate-in-list {
      0% {
        transform: rotate(-540deg);
      }

      100% {
        transform: rotate(-90deg);
      }
    }

    @keyframes animate-in-svg-circle-mask {
      0% {
        stroke-dashoffset: 1005;
      }

      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes animate-in-list-item-point {
      0% {
        transform: scale(0);
      }

      100% {
        transform: scale(1);
      }
    }
  </style>
</head>

<body>
  <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>
  <script>
    const pointCount = 7;
    const circleRadius = 160;
    const startAnimDelta = 5;
    const circumference = Math.PI * circleRadius * 2;
    var selectedItemIndex = -1;
    var circlePath = document.getElementById("mask-circle");

    /**
     * @description On Mouse Leave event handler for points
     */
    const onMouseLeave = () => {
      let index = selectedItemIndex !== -1 ? selectedItemIndex : 0;
      calculateOffset(index);
    };

    /**
     * @description On Click event handler for points
     * @param {Number} index - Index of list item
     */
    const onClick = (index) => {
      //If already selected, deselect
      selectedItemIndex = selectedItemIndex === index ? -1 : index;
      calculateOffset(index);

      //Find active item, deselect
      let activeListItem = document.querySelectorAll(
        ".navigation-circle-list-item.active"
      );
      if (activeListItem.length > 0) activeListItem[0].classList.remove("active");

      //Find new item by index, select
      let listItem = document.querySelectorAll(
        ".navigation-circle-list-item:nth-of-type(" + selectedItemIndex + ")"
      );
      if (listItem.length > 0) listItem[0].classList.add("active");
    };

    /**
     * @description - Calculate offset for circle path by index of list item
     * @param {Number} index - Index of list item
     */
    const calculateOffset = (index = 0) => {
      let offset = 0;

      if (index !== 0) offset = (circumference / pointCount) * (pointCount - index);

      circlePath.style.strokeDashoffset = `${offset}px`;
    };

    // INTRO
    let buffer = 500;
    let delay =
      1000 * (1 + pointCount / startAnimDelta - 1 / startAnimDelta) + buffer;
    setTimeout(() => onClick(1), delay);
  </script>
</body>

</html>

试一试

HTML5/CSS3超酷环形动画菜单
08-23
今天我们要分享一款非常有创意的HTML5/CSS3动画菜单，菜单是环形的，当鼠标点击中心按钮时，子菜单即会环绕展开，并伴随很酷的菜单展开动画。记得之前还分享过一款HTML5/CSS3实现iOS Path菜单，也是环形的菜单，动画效果也比较酷。
CSS3环形动画菜单
weixin_33912638的博客
12-05 198
在线演示 本地下载
css3旋转的环形菜单动画特效
11-04
css3旋转的环形菜单动画特效 css3旋转的环形菜单动画特效
CSS3科技感环形菜单动画特效.zip
07-11
代码简介：CSS3科技感环形菜单动画特效是一款蓝色个性的环形二级菜单显示切换代码。
环状菜单组件
时光清浅处，一步一安然
05-11 2124
环状菜单组件 今天咱们来实现一个环状菜单组件，大概效果如下图: 最近呢，正好学习了clip-path这个属性，那么我就想尝试使用它来完成这个效果。 那么首先，我们需要实现一个扇形的css。 div { width: 480px; height: 480px; border-radius: 50%; background-color: rgba(24, 24, 24, .75); clip-path: polygon(50% 50%, 100% -2px, 100%
css3-svg的图和操作
07-03
以压缩包中的"css3-svg-circle-menu"为例，这可能是一个使用CSS3和SVG构建的圆形菜单。在这个案例中，SVG可能被用来创建圆环形状的背景，每个菜单项则由SVG路径或圆形元素构成。通过CSS3，我们可以： 1. **布局**：...
60余种css基础+css3动画+canvas+svg
最新发布
05-10
2.CSS3和SVG实现的圆环菜单动画 3.css风车 4.css实现右上角标签条 5.百分比水球 6.大屏随机抽奖 7.纯css气泡背景 8.实现类似知乎文章图片原地放大缩小 9.主题切换实现方案 10.前端实现手写签名 ...等等60余种
CSS3环形菜单切换动画特效
06-05
3. **伪类选择器（Pseudo-classes）**：CSS3的伪类选择器如`:hover`, `:active`, 和`:focus`在环形菜单动画中起着关键作用。例如，当鼠标悬停在某个菜单项上时，我们可以利用`:hover`来触发特定的变换和过渡效果。 ...
圆环图标菜单：JS+CSS3实现展开收缩动画特效
CSS3提供了强大的动画和转换功能，可以通过简单的代码实现复杂的视觉效果。在该圆环菜单特效中，CSS3负责完成菜单项的旋转、颜色变化等视觉效果。使用了如`@keyframes`、`transform`、`transition`等CSS属性来实现...
js+css3圆环图标菜单展开收缩特效.zip
09-23
"js+css3圆环图标菜单展开收缩特效"就是一个很好的例子，它结合了JavaScript（JS）和CSS3的强大功能，为用户提供了独特的菜单交互体验。本文将深入探讨这个特效的实现原理、关键技术和可能的应用场景。 一、特效...
CSS3科技感环形菜单动画特效
04-26
CSS3科技感环形菜单动画特效
css3实例教程 一款纯css3实现的环形导航菜单
01-19
之前为大家介绍了好几款导航菜单，今天要给大家带来一款纯css3实现的环形导航菜单。该导航比较新鲜，列表图标位于中间，单击列表图标的时候，各项分布于列表图表的四周。形成一个环形。效果图如下： 　　实现的代码。 　　html代码： 复制代码代码如下:<div class=”container”> <h1> Cool Open/Close menu in full CSS</h1> <input type=”checkbox” id=”menu_opener_id” class=”menu_opener”> <label for
CSS3超酷环形动画菜单.zip
07-04
CSS3超酷环形动画菜单是一款非常有创意的CSS3动画菜单，菜单是环形的，当鼠标点击中心按钮时，子菜单即会环绕展开，并伴随很酷的菜单展开动画。
时尚个性的HTML5/CSS3圆环菜单
06-20
CSS3实现的圆环菜单，外观时尚靓丽，是个性达人的不二选择，试想下，给自己的网页来个这样的菜单，是不是拉风到爆？ 建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~统一开发环境是一款HTML5跨平台一站式应用开发、调试和部署工具， 它支持HTML5跨平台开发，原有Java跨平台插件支持Android、Symbian、Kjava的跨平台和原生开发，已覆盖Android、iOS、WP、Symbian、Kjava操作系统平台。
纯CSS3液态胶合效果环形菜单特效
ItStar
09-18 664
点击上方蓝字关注我哦我们要实现这样的效果,首先看我们的html结构<div class=&#34;wrap&#34;> <input type=&#34;ch...
svg 动画_CSS3和SVG实现的圆环菜单动画
weixin_39569543的博客
12-01 225
插件简介网页菜单的样式真是多种多样，特别是HTML5和CSS3的流行，让网页菜单的外观更加丰富多彩了。今天我们要给大家分享一个基于CSS3和SVG的圆环形状的菜单，在圆环上一共有7个节点，表示菜单项，当鼠标滑过或者点击其中一个节点时，就会弹出文字菜单项，圆环形状和节点都是采用SVG绘制而成，动画效果也非常不错。插件预览插件下载在线演示链接：https://www.html5tricks....
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
发果叁
10-20 3892
在前面的两节 【CSS 进阶向】 中，我们通过纯粹的 CSS 结合 HTML 元素实现了两种不同的“流光边框”效果的按钮。两者都是通过元素（或者伪元素）配合 CSS 动画属性 animation 与自定义动画帧 @keyframes 来实现的。这次我们通过 Vue 的动态样式和计算属性，来实现一个点击展开的圆环菜单，并且实现菜单图标的顺序显示。先上最终效果和代码：在实现过程中，我们按照以下步骤：1.整体结构 和 控制菜单展开/首起的按钮 2.控制按钮的 hover 状态 3.展开后的圆环 4.每个菜单的样式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值