How is the animation effect of Tencent Cloud's banner diagram realized?

clipboard.png

I have no idea after studying it for a long time. No, no, no.

May.22,2021

you can debug
on F12 and find that it is implemented by canvas

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

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


take a look at the background image + canvas

the background image is fixed, just use canvas to drag your tail around along a fixed path.

how do you drag your tail in a circle? There are a number of tutorials online, which you can search for.


is implemented in canvas.

exactly how to achieve, to put it simply, is to use the drawing api, provided by canvas to keep drawing, that is, the lines you see, and then it will be in the form of animation.

Menu