SVG 曲线 流光动画

最新推荐文章于 2025-07-08 12:05:02 发布
原创 最新推荐文章于 2025-07-08 12:05:02 发布 · 280 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

原理：绑定点击事件 拾取开始和结束坐标点  动态调整中间点位 即可画出曲线 ,在使用css 创建动画，就可以实现曲线流光效果

<script setup>
import { reactive, getCurrentInstance, ref,onMounted,computed } from "vue";
const { proxy } = getCurrentInstance();
const begin = ref("M 1591 626"); // 起始
const end = ref("1307 493"); // 结束
const valuex = ref(1357); // 控制点x
const valuey = ref(500); // 控制点y
const valuex2 = ref(1920); // 控制点x
const valuey2 = ref(919); // 控制点y
const trueD = computed(() => {
  return begin.value + " Q " + valuex.value + " " + valuey.value + ", " + end.value;
});
const trueV = computed(() => {
  return "0 0 " + valuex2.value + " " + valuey2.value;
});


onMounted(() => {
  console.log(  "mounted")
  const svg = document.querySelector("svg");
  const rect = svg.getBoundingClientRect();
  // valuex2.value = rect.width;
  // valuey2.value = rect.height;
  svg.addEventListener("click", function (event) {
    const rect = svg.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log(`Clicked at (${x} ${y})`);
  });
});
</script>

<template>
  <div class="container">

      <div class="g-container">
      <div class="g-svg">
        <svg
          id="svgBox"
          xmlns="http://www.w3.org/2000/svg"
          :viewBox="trueV"
          preserveAspectRatio="none"
        >
          <!--        辅助线  画线用，不实际展示-->
          <!-- <path :d="trueD" stroke="#fff" stroke-width="2" fill="transparent" /> -->

          <path
            class="g-dashed-line"
            d="M 947 460 Q 1004 290, 1173 375 Q 1423 500, 1421 195"
            stroke="#fff"
            stroke-width="2"
            fill="transparent"
          />
          <path
            class="g-dashed-line"
            d="M 933 463 Q 884 290, 707 375 Q 467 500, 457 200"
            stroke="#fff"
            stroke-width="2"
            fill="transparent"
          />
          <path
            class="g-dashed-line"
            d="M 940 437 Q 942 333, 827 350 Q 641 426, 643 274"
            stroke="#fff"
            stroke-width="2"
            fill="transparent"
          />
          <path
            class="g-dashed-line"
            d="M 940 437 Q 949 330, 1051 349 Q 1245 429, 1236 270"
            stroke="#fff"
            stroke-width="2"
            fill="transparent"
          />


          <path
            class="g-dashed-line1"
            d="M 608 516 Q 414 578, 608 638 Q 789 677, 961 674 Q 1244 670, 1336 630 Q 1495 574, 1312 516"
            stroke="#fff"
            stroke-width="2"
            fill="transparent"
          />

          <path
            class="g-dashed-line1"
            d="M 612 493 Q 173 576, 408 689 Q 533 735, 763 756 Q 1073 775, 1319 737 Q 1569 695, 1591 626 Q 1615 544, 1307 493"
            stroke="#fff"
            stroke-width="2"
            fill="transparent"
          />
      

         
        </svg>
        <!--      <canvas id="myCanvas"></canvas>-->
      </div>
      <!--画线工具 不实际展示-->
      <div
        style="
          position: absolute;
          right: 469px;
          bottom: 58px;
          width: 310px;
          height: 100px;
          z-index: 9999;
          color: #fff;
        "
        v-if="false"
      >
        x<input type="number" v-model="valuex" /><br />
        y<input type="number" v-model="valuey" /><br />
        {{ trueD }}<br />
        viewBox<br />
        x2<input type="number" v-model="valuex2" /><br />
        y2<input type="number" v-model="valuey2" /><br />
      </div>
    </div>


   
  </div>
</template>

<style scoped lang="scss">

.container {
  background-image: url(@/assets/GuidePage/12.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;



  .g-container {
    width: 100vw;
    height: 100vh;
  }
  #svgBox {
    width: 100vw;
    height: 100vh;
  }

  .g-dashed-line {
    fill: transparent;
    stroke: #6aedff;
    stroke-dasharray: 80, 620;
    stroke-dashoffset: 0;
    animation: move 3.4s infinite linear;
    filter: drop-shadow(0 0 5px #00e4ff);
    // filter:drop-shadow(0 0 1px rgb(65, 233, 200));
  }


    .g-dashed-line1 {
    fill: transparent;
    stroke: #6aedff;
    stroke-dasharray: 120, 620;
    stroke-dashoffset: 0;
    animation: move1 3.4s infinite linear;
    filter: drop-shadow(0 0 5px #00e4ff);
  }
   @keyframes move1 {
    0% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -750;
    }
  }
 @keyframes move {
    0% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -700;
    }
  }

  .left1 {
    position: absolute;
    left: 3vh;
    top: 23vh;
    // width: 30vh;
    // height: 6vh;
    width: 14vw;
    animation: left1 1s ease-in-out;
  }
  .left2 {
    position: absolute;
    left: 13vh;
    top: 43vh;
    //     width: 30vh;
    // height: 6vh;
    width: 14vw;
    animation: left2 1s ease-in-out;
  }
  .right1 {
    position: absolute;
    right: 4vh;
    top: 23vh;
    //     width: 30vh;
    // height: 6vh;
    width: 14vw;
    animation: right1 1s ease-in-out;
  }
  .right2 {
    position: absolute;
    right: 13vh;
    top: 43vh;
    // width: 30vh;
    // height: 6vh;
    width: 14vw;
    animation: right2 1s ease-in-out;
  }
  .a4 {
    position: absolute;
    left: 49%;
    top: 17.3vh;
    transform: translateX(-50%) scale(1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    width: 10vw;
  }
  .a6 {
    position: absolute;
       left: 50%;
    top: 62vh;
        width: 12vw;
    transform: translateX(-50%) scale(1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:hover {
      transform: translateX(-50%) scale(1.1);
    }
  }
  .ajtright {
    position: absolute;
    left: 38%;
    top: 60.8vh;
    transform: translateX(-50%) rotate(-180deg);
    animation: ajt2 cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
  }
  .ajtleft {
    position: absolute;
    left: 54%;
    top: 60.7vh;
    animation: ajt cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
  }

  .a1 {
    position: absolute;
    left: 62%;
    top: 49vh;
    width: 9vw;
    transform: translateX(-50%) scale(1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:hover {
      transform: translateX(-50%) scale(1.1);
    }
  }
  .a3 {
    position: absolute;
    left: 37%;
    top: 49vh;
    width: 9vw;
    transform: translateX(-50%) scale(1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:hover {
      transform: translateX(-50%) scale(1.1);
    }
  }

  .a9 {
    position: absolute;
     left: 49.5%;
       top: 53vh;
    width: 12vw;
    transform: translateX(-50%) scale(0.8);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:hover {
      transform: translateX(-50%) scale(1);
    }
  }

  .jtright {
    position: absolute;
    left: 43%;
    top: 16vh;
    transform: translateX(-50%) rotate(-180deg);
    animation: jt2 cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
  }
  .jtleft {
    position: absolute;
    left: 54%;
    top: 16vh;
    animation: jt cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
  }

  .item {
    position: absolute;
    text-align: center;
    color: #fff;
    font-size: 1.6vh;
    font-family: "Microsoft YaHei";
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon {
      width: 8vh;
      height: 8vh;
      background-image: url(@/assets/GuidePage/8.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

  .zp {
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 16vh;
    height: 11vh;
    
  }

  .zp1 {
    left: 18%;
    top: 57vh;
    background-image: url(@/assets/GuidePage/闸门控制.png);
    animation: mydrop-shadow-move1 1s linear , mydrop-shadow 1s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    animation-delay: 2s; /* 动画将在2秒后开始 */
    animation-fill-mode: both;
  }
  .zp2 {
    left: 23%;
    top: 66vh;
    background-image: url(@/assets/GuidePage/水位监测.png);
    animation: mydrop-shadow-move3 1s linear, mydrop-shadow 1s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    animation-delay: 1s; /* 动画将在2秒后开始 */
    animation-fill-mode: both;
  }
  .zp3 {
    left: 32%;
    top: 70vh;
    background-image: url(@/assets/GuidePage/流量监测.png);
    animation: mydrop-shadow-move5 1s linear, mydrop-shadow 1s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    animation-fill-mode: both;
  }
  .zp4 {
    left: 46%;
    top: 72vh;
    background-image: url(@/assets/GuidePage/视频监控.png);
    animation: mydrop-shadow 1s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
  }
  .zp5 {
    left: 60%;
    top: 70vh;
    background-image: url(@/assets/GuidePage/墒情监测.png);
    animation: mydrop-shadow-move6 1s linear, mydrop-shadow 1s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    animation-fill-mode: both;

  }
  .zp6 {
    left: 70%;
    top: 64vh;
    background-image: url(@/assets/GuidePage/压力监测.png);
    animation: mydrop-shadow-move4 1s linear, mydrop-shadow 1s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    animation-delay: 1s; /* 动画将在2秒后开始 */
    animation-fill-mode: both;
  }
  .zp7 {
    left: 75%;
    top: 55vh;
    background-image: url(@/assets/GuidePage/泵站控制.png);
    animation: mydrop-shadow-move2 1s linear, mydrop-shadow 1s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    animation-delay: 2s; /* 动画将在2秒后开始 */
    animation-fill-mode: both;
  }

  .item1 {
    left: 28%;
    top: 30vh;
    animation: item cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
  }

  .item6 {
    left: 23%;
    top: 22vh;
    animation: item cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
    animation-delay: 0.3s; /* 动画将在2秒后开始 */
  }

  .item2 {
    left: 35%;
    top: 25vh;
    animation: item cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
    animation-delay: 0.5s; /* 动画将在2秒后开始 */
  }

  .item3 {
    left: 58%;
    top: 26vh;
    animation: item cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
    animation-delay: 1s; /* 动画将在2秒后开始 */
  }

  .item4 {
    left: 65%;
    top: 31vh;
    animation: item cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
    animation-delay: 0.6s; /* 动画将在2秒后开始 */
  }

  .item5 {
    left: 71%;
    top: 23vh;
    animation: item cubic-bezier(0.36, 0, 0.64, 1) 1.5s infinite alternate;
    animation-delay: 0.8s; /* 动画将在2秒后开始 */
  }

  .a4:hover {
    transform: translateX(-50%) scale(1.1);
  }

  @keyframes left1 {
    0% {
      left: -30vh;
    }
    100% {
      left: 3vh;
    }
  }

  @keyframes left2 {
    0% {
      left: -30vh;
    }
    100% {
      left: 13vh;
    }
  }

  @keyframes right1 {
    0% {
      right: -30vh;
    }
    100% {
      right: 3vh;
    }
  }

  @keyframes right2 {
    0% {
      right: -30vh;
    }
    100% {
      right: 13vh;
    }
  }
  @keyframes jt {
    0% {
      left: 54%;
    }
    100% {
      left: 55%;
    }
  }
  @keyframes jt2 {
    0% {
      left: 43%;
    }
    100% {
      left: 42%;
    }
  }

  @keyframes ajt {
    0% {
      left: 55.2%;
    }
    100% {
      left: 56.2%;
    }
  }
  @keyframes ajt2 {
    0% {
      left: 43.8%;
    }
    100% {
      left: 42.8%;
    }
  }

  @keyframes item {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(1.5vh);
    }
  }
}

@keyframes mydrop-shadow-move1 {
  0% {

    left: 46%;
    top: 72vh;
    opacity: 0;
  }

  100% {

    left: 18%;
    top: 57vh;
     opacity: 1;
  }
}

@keyframes mydrop-shadow-move2 {
  0% {

    left: 46%;
    top: 72vh;
     opacity: 0;
  }

  100% {

    left: 75%;
    top: 55vh;
     opacity: 1;
  }
}

@keyframes mydrop-shadow-move3 {
  0% {

    left: 46%;
    top: 72vh;
     opacity: 0;
  }

  100% {

    left: 23%;
    top: 66vh;
     opacity: 1;
  }
}

@keyframes mydrop-shadow-move4 {
  0% {

    left: 46%;
    top: 72vh;
     opacity: 0;
  }

  100% {

    left: 70%;
    top: 64vh;
     opacity: 1;
  }
}

@keyframes mydrop-shadow-move5 {
  0% {

    left: 46%;
    top: 72vh;
     opacity: 0;
  }

  100% {

    left: 32%;
    top: 70vh;
     opacity: 1;
  }
}

@keyframes mydrop-shadow-move6 {
  0% {
    left: 46%;
    top: 72vh;
     opacity: 0;
  }

  100% {
    left: 60%;
    top: 70vh;
    opacity: 1;
  }
}
</style>

callBack_____
关注
SVG动画一
weixin_44402016的博客
01-11 863
【代码】SVG动画一。
SVG+CSS动画实现动效（流光、呼吸等效果）
qq_39345221的博客
02-01 8474
css+svg实现流光、呼吸等动效
Vue Flow 项目中默认边样式配置失效问题解析
gitblog_07758的博客
06-08 367
Vue Flow 项目中默认边样式配置失效问题解析 问题背景 在Vue Flow图表库的使用过程中，开发者发现了一个关于边(edge)样式配置的问题。具体表现为：当用户尝试通过pathOptions属性为默认边类型设置样式时，这些样式配置未能正确应用到边的显示上。 技术细节分析 Vue Flow作为一个基于Vue的流程图库，提供了丰富的边类型和样式配置选项。pathOptions是其中用于定义边路...
svg + canvas 实现流光动画
callBack_____的博客
09-27 477
【代码】svg + canvas 实现流光动画。
SVG 文字sin型曲线动画
dianju8374的博客
07-18 369
先上图： 未命名项目.gif 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &...
SVG 画出动态线条流动效果
热门推荐
sunxiaobai1的博客
02-10 1万+
版權聲明: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 最近做了一个项目 UI图长这样 中间的线条没有gif 需要用代码画出来 尝试了很多种方法 最终选择了用svg画 下面是全部的代码 <template> <div class="right-page"> <Subtitles :hanzi="title.zh" :yingyu="title.en" class="title"></Subtitles> .
炫酷的svg流动线条动画效果
ICode联盟
12-24 1887
下载地址dd:
HTML5(九)——超强的 SVG 动画
2401_85124892的博客
05-27 428
我们上述制作的 SVG 图形、动画等，运行在低版本IE中，发现SVG只有IE9以上才支持，低版本的并不能支持，为了兼容低版本浏览器，可以使用 VML ,VML需要添加额外东西，每个元素需要添加 v:元素，样式中还需要添加 behavier ，经常用于绘制地图。Raphael.js是通过SVG/VML+js实现跨浏览器的矢量图形，在IE浏览器中使用VML，非IE浏览器使用SVG，类似于jquery，本质还是一个javascript库，使用简单，容易上手。
CSS3彩色曲线彩虹流动动画特效
07-24
在本文中，我们将深入探讨如何使用CSS3来创建一个炫酷的彩色曲线彩虹流动动画特效。这个特效是一种全屏的视觉展示，它展现了无限循环的彩虹弯曲效果，为网页增添了一抹独特的动态美感。 首先，我们需要理解CSS3的...
前端svg路径path指令动画（一）
RIDER_hjf的博客
03-31 1613
一、svg 的 path 介绍 1.1 path元素的形状是通过属性d来定义的，属性d的值是一个命令+参数的序列。 1.2 path 指令 M = moveto(M X,Y) ： 将画笔移动到指定的坐标位置 L = lineto(L X,Y) ：画直线到指定的坐标位置 H = horizontal lineto(H X)：画水平线到指定的X坐标位置 V = vertical lineto(V Y...
svg+css3做一个动感的波浪效果实现
12-14
SVG是一种基于XML的图形格式，它允许我们创建清晰、可缩放的图形，而CSS3则提供了丰富的动画功能，两者结合可以实现复杂的视觉效果。 首先，SVG元素`<svg>`用于定义一个画布，`viewBox`属性用于指定图形的视口，...
SVG灯泡发光特效.zip
07-04
SVG灯泡发光特效基于CSS3和SVG实现，当鼠标经过灯泡点亮动画特效。
HTML5基于SVG技术实现动画效果的折线图.rar
07-10
HTML5基于SVG技术实现动画效果的折线图，并且还具有渐变色效果，用chrome打开本特效后，会看到拆线图以动画效果绘制，很像以前那种Flash效果的曲线图。使用HTML5技术可很好的就实现此种效果，且可跨平台（PC和智能手机）运行。
流动的SVG线条
weixin_34194379的博客
04-02 3119
话不多说，咱先上效果图： 是不是很酷炫，这个效果是用SVG+CSS实现的，现在我们就来一起解构一下这个动画的实现。 预备知识 需要掌握的几个SVG的几个标签用法 <path> 指令 参数 说明 M x y 将画笔移动到点(x,y) L x y 画笔从当前的点绘制线段到点(x,y) H x 画笔从当前的点绘制水平线段到点(x,y0) V y 画笔从当前的...
SVG曲线路径动画
qq_38044611的博客
08-13 1098
需要做一个发光小球沿着曲线运动的动画，不想用echarts的lines做了，看到SVG有沿着路径的动画决定尝试一下。 先放下代码 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1370 1214"> <image id="star" x="0" y="0" xlink:href="../static/img/enterprise/point.png" width="161px" height="144
SVG动画演示贝塞尔曲线(1-4阶)绘制过程
我的Github
01-30 2537
贝塞尔曲线是我们大陆的叫法，英文名是Bézier Curve，港澳台称为貝茲曲線，新加坡马来西亚称为贝济埃曲线。 先看一下效果图： 点击这里查看动画效果 维基百科中的贝塞尔曲线条目中的几个GIF动画很漂亮，顺路贴上来。 核心Javscript代码： var w = 250, h = 300, t = .5, delta =
用svg在曲线轨迹上实现元素根据轨迹滑动(动画效果)
yepengsong的博客
06-25 2441
标签中的 d是绘制图形轨迹的路径，id是为animateMotion标签中mpath标签提供指定id，repeatCount:重复次数，默认是一次，使用indefinite参数做永动； 中的href指定path路径。4:获取SVG的path路径以及圆点的dom元素。1：npm安装anime.js包。
【CSS】SVG实战入门，svg画曲线，svg简单动画上手入门
余浩的博客
03-14 4801
- `` 根元素以像素为单位定义了整个图像的 width 和 height，还通过 xmlns 属性定义了 SVG 的命名空间， - `version` 属性可定义所使用的 SVG 版本， - `` 元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示， - `` 元素允许咱们为图像定义完整的描述信息， - ``标签 用来创建一个矩形，通过 `fill` 属性 把背景颜色设为黄色。 - ``标签 用来创建一个圆。
svg动画 画线动画
最新发布
fanxia2313的博客
07-08 374
本文介绍了为SVG图片添加简单动画的方法。通过CSS3的@keyframes和animation属性，可以实现路径描边和颜色渐变的动画效果。关键点包括：使用stroke-dasharray和stroke-dashoffset创建描边动画，调整fill属性改变填充色，并通过JavaScript的getTotalLength()方法精确计算路径长度。文章提供了完整的SVG代码示例和对应的CSS动画样式，展示了两个路径分别以不同时长和延迟时间循环播放的动画效果。对于更复杂的动画，建议交由专业UI人员完成。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值