腾讯云的banner图动画效果是如何实现的？

Question

研究了半天毫无思路啊。。

Answer 1

看了一下，背景图 + canvas

背景图是固定的，用canvas沿着固定的路径拖着尾巴绕圈圈就行了。

怎么拖着尾巴绕圈圈？网上有一批教程，可以搜索一下。

Answer 2

你可以f12调试一下
可以发现是canvas实现的

heroBanner > div > div.hero-img > div:nth-child(2) > div.wrap-canvas.J-bannerWrappedCanvas > canvas

<canvas class="layer1" width="1920" height="500" style="display: none;"></canvas>

Answer 3

是用 canvas 实现的。

具体怎么实现的，简单说就是使用 canvas 提供的绘图 api，不停地绘图，也就是你看到的线条，之后就会形成动画的形式。