使用CSS和JavaScript创建蛇状效果

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

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

<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js”></script>

步骤：

我们取了一个名为“snake”的div标签，它是整个蛇的实例。我们取了“circle”，你可以使用简单的CSS来取得其他形状。
我们创建了更多的div标签来赋予蛇的长度。我们可以添加更多的div标签来增加它的长度。
document.body.addEventListener(“mousemove”)： 这个JavaScript函数将一个移动的鼠标事件附加到文档上。当用户在文档中移动鼠标指针时，所指定的事件发生。
e.clientX： 获取水平坐标。
e.clientY： 获取垂直坐标。
stagger： 用于动画延迟（0.05秒），我们可以看到蛇移动。
gsap.to(“.snake”)： 它将跟踪蛇与指针坐标的位置。

示例：

<!DOCTYPE html> 
<html> 
<head> 
      
    <style type="text/css"> 
        /* Area part for snake */ 
          
    </style> 
</head> 
<body> 
    <div class="area"> 
        <!-- You can add more divs for a long snake-->
        <div class="snake"></div> 
        <div class="snake"></div> 
        <div class="snake"></div> 
        <div class="snake"></div> 
        <div class="snake"></div> 
        <div class="snake"></div> 
        <div class="snake"></div> 
        <div class="snake"></div> 
        <div class="snake"></div> 
        <div class="snake"></div> 
    </div> 
  
<!-- GSAP Library -->
<script 
 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"> 
</script> 
  
<!-- JavaScript Code for mouse event -->
<script type="text/javascript"> 
    document.body.addEventListener("mousemove", e => { 
        gsap.to(".snake", { 
            x : e.clientX, 
            y : e.clientY, 
            stagger : -0.05, 
        }) 
        }) 
</script> 
</body> 
</html>

CSS代码

.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 solid white; 
     border-radius: 50%; 
}

输出:

使用CSS和JavaScript创建蛇状效果