css 定位连线,使用纯CSS从一个点到另一个点绘制线（路径）

I have a image animating in this path below and would like the path to be visible.

CSS

div {

width:10px;

height:10px;

background:red;

position:relative;

-webkit-animation-name:Player1;

-webkit-animation-duration:100s;

-webkit-animation-timing-function:cubic-bezier(0.1,0.1,0.1,0.1);

-webkit-animation-delay:2s;

-webkit-animation-iteration-count:5;

-webkit-animation-direction:normal;

-webkit-animation-play-state:running

}

@-webkit-keyframes Player1 {

0% {

background:red;

left:20px;

top:20px

}

25% {

background:#ff0;

left:800px;

top:200px

}

50% {

background:blue;

left:950px;

top:500px

}

75% {

background:green;

left:0;

top:800px

}

100% {

background:red;

left:0;

top:0

}

}

HTML

is it possible to have a line linking them with only css code? and if not would you please help me with a code?

解决方案

This is obviously what SVG (Structured Vector Graphics) are for.