css一个点,用纯CSS从一个点到另一个点绘制一条线（路径）

我在下面的这条路径中有一个动画图像，并希望路径可见。

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

是否有可能只用css代码链接它们？如果没有，请你帮我一个代码？