使用纯CSS从一个点到另一个点绘制线（路径） [英] Draw a line (path) with pure CSS from one point to another

问题描述

pre> 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

 < div>< / div> 
  

是否可以有一行将它们与只有CSS代码连接起来？如果不是你会帮助我一个代码？

解决方案

这显然是SVG（结构化矢量图形）。

 < svg> 
< polyline points =20,20 800,200 950,500 0,800 0,0>< / polyline> 
< / svg> 
  

或以这里的可用速度。

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

<div></div>

Here is a fiddle.

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.

<svg>
    <polyline points="20,20 800,200 950,500 0,800 0,0"></polyline>    
</svg>

Working sample here.

Or at a usable speed here.

这篇关于使用纯CSS从一个点到另一个点绘制线（路径）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！