Results the following

UI design such a design draft, this easy to do, directly cut a GIF to me, I position on the line. But the front end can also be implemented.

process

  • Line is asvgWe passedsvgWithin thepathTo achieve the animation effect of small dots.
  • svgThe UI will typically provide.
  • Pay attention to the point vueWithin thesvgCan’t write instyle.Reference – An error will be reported when template SVG contains the style tag

1. Display SVG

  • We use firstsvgDraw an ice cream
  • Draw SVG line tool website
<svg width="400" height="600">
  <path d="M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z" stroke="# 333" stroke-width="2" fill="none" />
</svg>
Copy the code

2. Draw a dot and run

html

<div class="line-panel">
  <div class="round-1"></div>
  <svg width="400" height="600">
    <path d="M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z" stroke="# 333" stroke-width="2" fill="none" />
  </svg>
</div>
Copy the code

scss

Describe the following animation properties, CSS animation properties

animation: move 3s 0s linear infinite;

  • moveIs:@keyframesDefine the movement method
  • 3s: The time taken to run the SVG path
  • 0s: How long to delay the execution
  • linear: linear
  • infinite: Execute in an infinite loop
.line-panel{/ / dot.round-1 {
    z-index: 2;
    position: absolute;
    left: 0;
    border-radius: 50%;
    background-color: red;
    width: 10px;
    height: 10px; // Move, where path is the same as SVG path offset-path:path('M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z');
    animation: move 3s 0slinear infinite; } // SVG {position: absolute;
    left: 0; }} // Move animation@keyframes move {
  100% {
    offset-distance: 100%; }}Copy the code

The effect

3. Multiple points

In case there are many points, we can use SCSS @mixin to optimize

html

  • We add 5 points to move
<div class="line-panel">
  <div class="round-1"></div>
  <div class="round-2"></div>
  <div class="round-3"></div>
  <div class="round-4"></div>
  <div class="round-5"></div>
  <svg width="400" height="600">
    <path d="M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z" stroke="# 333" stroke-width="2" fill="none" />
  </svg>
</div>
Copy the code

scss

$svg-path: $svg-path:"M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z"; // This path corresponds to the path in SVG/* $color: dot background color $path: dot walking path $duration How long to finish $delay how long to start running */
  @mixin move-round($color, $path, $duration, $delay) {
    z-index: 2;
    position: absolute;
    left: 0;
    border-radius: 50%;
    background-color: $color;
    width: 10px;
    height: 10px; / / move offset - path:path($path);
    animation: move $duration $delay linear infinite;
  }
  .line-panel {
    .round-1 {
      @include move-round(blue, $svg-path, 5s.0s);
    }
    .round-2 {
      @include move-round(green, $svg-path, 5s.1s);
    }
    .round-3 {
      @include move-round(red, $svg-path, 5s.2s);
    }
    .round-4 {
       @include move-round(black, $svg-path, 5s.3s);
     }
    .round-5 {
      @include move-round(yellow, $svg-path, 5s.4s);
    }

    svg{
      position: absolute;
      left: 0; }}@keyframes move {
    100% {
      offset-distance: 100%; }}Copy the code

The effect

reference

  • Once we know the rules, we can easily draw our fly chart
  • Zhang Xinxu – offset – the path