在工作日常中难免会遇到一些大屏项目,对于中台类型产品,少不了数据流通显示环节。

今天就给大家讲解一种实现数据流通图的写法。

等不及的小伙伴直接翻到最底部,把html代码拷贝出来,粘贴到你的html内就能看到效果。

需求:
实现下图所示:

image.png

分析:
拿到设计稿后我们首先要做的是分析此图该用哪种技术实现?
第一步:应该使用定位实现图中的文本和静态元素
第二步:难点分析;需要动态展现数据流。这里因为动画很简单,所以选择svg实现。
第三步:布局,以及排版;把设计稿先固定宽高,以后通过缩放实现适配。

先实现这样的布局。实现布局时候,将整体设计稿定当作背景。
1685463859134.png
可以先把大体布局写好。也可以先实现动图。这里我们选择实现大体布局。再把设计稿背景去掉。
image.png

接着制作svg路径
1685464256731.png

调整路径样式
3169147204181b9787c40d680374f8c.png

导出svg

5d8a2e9aacf2c9c6edc5c3f1945145d.png

在VScode打开刚刚储存的svg,复制刚刚svg中的多边形或者路径,并粘贴到空svg内

image.png

<!-- 这里的980和526就是设计稿宽高 -->
<!-- 给polyline设置style,和设计稿对齐。 -->
<svg xmlns="http://www.w3.org/2000/svg" width="980" height="526">
            <polyline style="fill:none;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10; stroke:rgb(58 171 255 / 20%); transform: translate(83px, -31px); " points="
            78.521,237.425 -31.068,279.891 205.333,397.667 454.333,304 400,275.667 576,215 826.465,320.023 634,409.343 "
            />
      </svg>

再就是一步一步调整;添加渐变色,添加动画属性等等。就完成了。下面是整体代码:复制粘贴到你的html内就能看到效果辣!

<!DOCTYPE html>
<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>
</head>
<body>
  <div style="width:980px;height: 526px; background-image: url(./gbs.png); position: relative;">
    <div style="position: absolute;width: 100%;height: 100%;">
      <svg xmlns="http://www.w3.org/2000/svg" width="980" height="526" viewBox="0 0 980 526">
        <defs>
          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color: #0285FF;" />
            <stop offset="5%" style="stop-color: #00FCFF;" />
            <stop offset="10%" style="stop-color: #0285FF;" />
            <stop offset="15%" style="stop-color: #00FCFF;" />
            <stop offset="20%" style="stop-color: #0285FF;" />
            <stop offset="25%" style="stop-color: #00FCFF;" />
            <stop offset="30%" style="stop-color: #0285FF;" />
            <stop offset="35%" style="stop-color: #00FCFF;" />
            <stop offset="40%" style="stop-color: #0285FF;" />
            <stop offset="45%" style="stop-color: #00FCFF;" />
            <stop offset="50%" style="stop-color: #0285FF;" />
            <stop offset="55%" style="stop-color: #00FCFF;" />
            <stop offset="60%" style="stop-color: #0285FF;" />
            <stop offset="65%" style="stop-color: #00FCFF;" />
            <stop offset="70%" style="stop-color: #0285FF;" />
            <stop offset="75%" style="stop-color: #00FCFF;" />
            <stop offset="80%" style="stop-color: #0285FF;" />
            <stop offset="85%" style="stop-color: #00FCFF;" />
            <stop offset="90%" style="stop-color: #0285FF;" />
            <stop offset="95%" style="stop-color: #00FCFF;" />
            <stop offset="100%" style="stop-color: #0285FF;" />
          </linearGradient>
        </defs>
        <polyline style="fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;transform: translate(83px, -31px);" points="
              78.521,237.425 -31.068,279.891 205.333,397.667 454.333,304 400,275.667 576,215 826.465,320.023 634,409.343 "
              stroke-dasharray="70" stroke-dashoffset="0" stroke="url(#gradient)"
              >
              <animate
                attributeName="stroke-dashoffset"
                attributeType="XML"
                values="980;0;"
                dur="5s"
                repeatCount="indefinite"
                ></animate>
            </polyline>
            <polyline style="fill:none;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10; stroke:rgb(58 171 255 / 20%); transform: translate(83px, -31px); " points="
            78.521,237.425 -31.068,279.891 205.333,397.667 454.333,304 400,275.667 576,215 826.465,320.023 634,409.343 "
            />
      </svg>
    </div>
    <!-- 这里你们没有背景图片。可以自己设置成一个纯色背景,就可以看到是覆盖在动图上面的 -->
    <div style="width:160px;height: 120px;background-image: url(./CnRxMh.png); position: absolute;left: 106px;top:132px;border:1px solid red;">元素1</div>
    <div style="width:160px;height: 120px;background-image: url(./K1R8bm.png); position: absolute;left: 205px;top:285px;border:1px solid red;">元素2</div>
    <div style="width:160px;height: 120px;background-image: url(./Omc8gl.png); position: absolute;left: 572px;top:115px;border:1px solid red;">元素3</div>
    <div style="width:160px;height: 120px;background-image: url(./fwilwN.png); position: absolute;left: 635px;top:296px;border:1px solid red;">元素4</div>
  </div>
</body>
</html>

效果图:

image.png

如果觉得有帮到你,请给个关注,点个赞吧!

注意:由于是使用定位实现,所以一定要注意元素摆放的先后顺序。先绘制流动图,再绘制其他元素,这样就被盖在流动图上面。


smallStone
419 声望71 粉丝

前端一枚^_-