使用 CSS 和 JavaScript 的蛇形效果

在本文中，我们将看到如何使用CSS和JavaScript创建蛇形效果。

CDN 链接：在您的 HTML 代码中包含以下GSAP库。

方法 ：

• 我们采用了一个名为蛇的div标签，它是完整蛇的一个实例。我们已经采用了圆形，我们可以通过使用简单的 CSS 来获得另一种形状。
• 我们创建了更多的div来给出蛇的长度。我们可以包含更多的div标签来增加它的长度。
• document.body.addEventListener (“mousemove”)： JavaScript 中的此函数将移动鼠标事件附加到文档。当用户将鼠标指针移动到文档中的任意位置时，就会发生被提及的事件。
• e.clientX：获取横坐标。
• e.clientY：获取垂直坐标。
• stagger ：对于动画延迟（0.05 秒），我们可以看到蛇。
• gsap.to(“.snake”)：它将参考指针坐标跟踪蛇。

例子：

HTML

      
    
        /* Area part for snake */
        .area
        {
            width: 80px;
            height: 80px;
            position: relative;
        }
        /* Designing of a part of snake (here circle) */
        .area .snake
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(3, 171, 15);
            border: 2px soild white;
            border-radius: 50%;
        }
    


    
        
        
        
        
        
        
        
        
        
        
        
    
  



  


    document.body.addEventListener("mousemove", e => {
        gsap.to(".snake", {
            x : e.clientX,
            y : e.clientY,
            stagger : -0.05,
        })
        })

输出 ：

从上面的输出中可以看出，我们创建了一条跟随鼠标指针的蛇，使其看起来像蛇一样的效果。