如何添加水滴效果?

方法一：使用 CSS 水滴效果

.water-drop {
  width: 10px;
  height: 10px;
  background-color: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: water-drop 1s linear infinite;
}

@keyframes water-drop {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(0, 0);
  }
}

方法二：使用 JavaScript 和 Canvas

const waterDrop = document.createElement('div');
waterDrop.style.width = '10px';
waterDrop.style.height = '10px';
waterDrop.style.backgroundColor = 'black';
waterDrop.style.position = 'absolute';
waterDrop.style.left = '50%';
waterDrop.style.top = '50%';
waterDrop.style.transform = 'translate(-50%, -50%)';
waterDrop.style.animation = 'water-drop 1s linear infinite';

document.body.appendChild(waterDrop);

使用方法：

1. 将上述代码添加到 HTML 页面中。
2. 使用 CSS 或 JavaScript 控制水滴的形状、颜色和动画。

注意：

• 你可以根据需要调整水滴的宽度和高度。
• 你可以更改水滴的颜色。
• 你可以更改水滴的动画速度。