CSS3是否可以创建元素之间的线条？

Question

7

我在创建的应用程序中使用了jQuery Draggable，并且我想知道是否有可能在对话框和网站元素之间创建一条线？我希望它能跟随可拖动的框，随着你拖动它而移动。

我正在寻找CSS / HTML方法，而不是jQuery / JS方法。如果没有办法使用纯CSS3 / HTML5创建它，那么我将开始使用JS方法 - 只是想知道 :) enter image description here

- Atadj

3

没有 JavaScript，你无法使用 Canvas。 - Denys Séguret

@dystroy 真遗憾，但感谢您的澄清！那么我认为使用JS/HTML5画布解决方案是了解HTML5画布并创建它的唯一途径。 - Atadj

当然可以。鼠标事件实时提供有关光标的信息，而画布则允许您绘制相应的线条。我建议您在画布教程中投入一些时间。 - Šime Vidas

@ŠimeVidas 我就是这么做的。谢谢！我只是想确保在开始之前没有更简单的HTML/CSS方法来完成它。 - Atadj

很抱歉，如果没有任何JavaScript，你可能无法继续下去。话虽如此，你可以利用CSS来实现破折号和旋转，就像这样：http://jsfiddle.net/A3TN3/1/。 - pimvdb

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris · Accepted Answer

基本上：不，没有用 CSS 独立实现这个的方法。

但是，如果将其视为 CSS 谜题（我建议您在任何真实应用中都不要使用以下解决方案），您可能会实现类似的效果。同样地，这将完全滥用 HTML 和 CSS。

您可以创建许多 div，每个代表一个“像素”。您更改 div 的 background-color 在 :hover 时，并使用（又一种滥用的）transition 技巧（伪无限延迟）在 :hover 状态消失后维护 background-color。

这里有个演示：小链接。尝试在顶部悬停以查看随着鼠标移动绘制的“面包屑”。

再次强调，这完全是滥用，不应在任何实际应用中使用。

可以扩展此方法使用 CSS 创建一个微型画图程序。我制作了一个小的 dabblet 来说明：另一个小链接（尝试通过单击和移动鼠标来绘图！）

最重要的是：使用 JavaScript —— 在这种情况下只有它有效（您无法在没有 JavaScript 的情况下控制 canvas）。