Нарисуйте линию (путь) с чистым 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-код 

<div></div>

вот скрипка.

возможно ли иметь строку, связывающую их только с кодом css? а если нет, не могли бы вы помочь мне с кодом?

6
css3 html

2 ответов

это, очевидно, то, для чего SVG (структурированная векторная графика). 

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

рабочий образец здесь.

или на полезной скорости здесь.

7

вы можете рассчитать угол и расстояние между точками и использовать CSS-преобразования, чтобы нажать линию, где вы хотите. Вот jsfiddle. Это немного грубо, но я думаю, вы поймете.

var startPoint=[200,200], 
    endPoint=[300,300],
    rise=endPoint[1]-startPoint[1],
    run=endPoint[0]-startPoint[0],
    slope=rise/run,
    DEGREES=57.2957795,
    width=Math.sqrt((rise*rise)+(run*run));
var line=document.getElementById('line');
line.style.top=startPoint[0]+'px';
line.style.left=startPoint[1]+'px';
line.style.width=width+"px";
line.style.transform= "rotate("+(Math.atan(slope)*DEGREES)+"deg)";
line.style.transformOrigin= "0 0";
0