html/css/javascript中的动画连线

Question

在我的网站上，我需要一条动画连线。它是气球的一部分，一定有某种缠绕的效果。有什么简单的方法可以用HTML，CSS或javascript来完成吗？在尽可能多的浏览器上可见也是很重要的。我已经看过SVG了，但是对于网站的一小部分来说，这看起来太复杂了。

Answer 1

尽管很伤人，我还是推荐给你一个动画礼物。

如果用户更改文本大小/浏览器缩放(CTRL +/-)，我会将气球和电线放在相同的动画gif中，以确保这两个对象不会“分离”。

Answer 2

只需使用div并将其样式如下：

width:3px;
height:300px;
background-color: #f0dbc0;
background-image: repeating-linear-gradient(35deg, transparent, transparent 5px, #87530f 5px, #87530f 15px);

然后，您只需要添加一些旋转到这个div和一些水平运动与js。就这样。

如果你只是粘贴一根绳子，它看起来就像一根绳子:)

Answer 3

如果您想让有线交互使用paper.js