管道流动效果---svg

最新推荐文章于 2025-05-17 18:01:32 发布

成序猿@

最新推荐文章于 2025-05-17 18:01:32 发布

阅读量3.9k

点赞数 4

文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/m0_53273062/article/details/128268243

版权

最近有些迷恋上了动画，感觉好吊啊。正好碰到需求，需求是这样：类似流水线，要看到流动的方向，例如从左到右。最终使用svg 的polyline多线段绘制方法，并配合linearGradient设置渐变，实现。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .border-view {
        display: flex;
        justify-content: center;
        margin-top: 40px;
      }
      .container {
        position: relative;
        height: 200px;
        width: 200px;
        background-color: beige;
      }
      svg {
        position: absolute;
      }

      polyline {
        animation: dash 5000s linear infinite;
      }

      @keyframes dash {
        to {
          stroke-dashoffset: -200000;
        }
      }
    </style>
  </head>
  <body>
    <div class="border-view">
      <div class="container">
        <svg width="200" height="200">
          <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="green" />
            <stop offset="100%" stop-color="red" />
          </linearGradient>
          <polyline
            points="0,10 100,10 100,80 190,80 190,200"
            style="
              fill: white;
              stroke-dasharray: 0, 20;
              stroke: url(#linear);
              stroke-linecap: round;
              stroke-width: 10;
            "
          />

         
        </svg>
      </div>
    </div>
  </body>
</html>

后来再次基础上实现健康宝页面小球动画。可是掉了好多头发终于感觉可行了。只能说svg好猛。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .border-view {
        display: flex;
        justify-content: center;
        margin-top: 40px;
      }
      .container {
        position: relative;
        height: 200px;
        width: 200px;
        background-color: beige;
      }
      svg {
        position: absolute;
      }

      polyline {
        animation: dash 5000s linear infinite;
      }

      @keyframes dash {
        to {
          stroke-dashoffset: -200000;
        }
      }
    </style>
  </head>
  <body>
    <div class="border-view">
      <div class="container">
        <svg width="200" height="200">
          <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="green" />
            <stop offset="100%" stop-color="red" />
          </linearGradient>

          <rect
            width="90%"
            height="90%"
            stroke-width="8"
            x="10"
            y="10"
            fill="none"
            stroke="url(#linear)"
            stroke-dasharray="0,20"
            stroke-linecap="round"
          ></rect>
        </svg>
      </div>
    </div>
  </body>
</html>