艺术与科技的完美交融：用JS+CSS打造一场创意十足的雨景

2023-11-29 12:24:09

雨景的艺术魅力

雨景自古以来就是许多艺术家笔下的灵感来源。从中国古代的山水画到西方的印象派画作，雨景的艺术魅力经久不衰。在视觉艺术领域，雨景以其细腻的层次感和丰富的色彩变化而著称。雨滴落在水面上溅起阵阵涟漪，雨水流过屋檐滴落而下，雨雾笼罩着远处的山林，这些景象都充满了诗情画意。

用代码创造雨景

如今，随着计算机技术的飞速发展，艺术家们开始使用数字工具来创作艺术作品。JavaScript和CSS是两种强大的前端编程语言，它们可以用来创建各种各样的动画和视觉效果。利用JavaScript和CSS，我们可以轻松地创建一个逼真的雨景，并将其添加到我们的网站或项目中。

JavaScript代码实现

首先，我们需要使用JavaScript来创建雨滴。我们可以使用canvas元素来创建一个画布，然后使用JavaScript代码在画布上绘制雨滴。雨滴的大小、速度和颜色都可以通过JavaScript代码来控制。

function createRaindrop() {
  // 创建一个新的雨滴对象
  const raindrop = {
    x: Math.random() * window.innerWidth,
    y: 0,
    speed: Math.random() * 5 + 1, // 雨滴速度范围：1-6
    size: Math.random() * 3 + 1, // 雨滴大小范围：1-4
    color: `rgba(255, 255, 255, ${Math.random()})` // 雨滴颜色：白色透明度随机
  };

  // 将雨滴对象添加到雨滴数组中
  raindrops.push(raindrop);
}

接下来，我们需要使用JavaScript代码来控制雨滴的下落。我们可以使用setInterval()函数来创建一个循环，在循环中更新雨滴的位置。

function updateRaindrops() {
  // 遍历所有雨滴
  for (let i = 0; i < raindrops.length; i++) {
    // 更新雨滴的位置
    raindrops[i].y += raindrops[i].speed;

    // 如果雨滴超出画布底部，则将其从雨滴数组中删除
    if (raindrops[i].y > window.innerHeight) {
      raindrops.splice(i, 1);
      i--;
    }
  }
}

最后，我们需要使用JavaScript代码来将雨滴渲染到画布上。我们可以使用fillRect()方法来绘制雨滴。

function renderRaindrops() {
  // 清除画布
  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

  // 遍历所有雨滴
  for (let i = 0; i < raindrops.length; i++) {
    // 绘制雨滴
    ctx.fillStyle = raindrops[i].color;
    ctx.fillRect(raindrops[i].x, raindrops[i].y, raindrops[i].size, raindrops[i].size);
  }
}

CSS代码实现

接下来，我们需要使用CSS代码来创建下雨的效果。我们可以使用CSS的animation属性来创建动画，并在动画中改变雨滴的位置和透明度。

.raindrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  animation: raindrop-fall 1s infinite linear;
}

@keyframes raindrop-fall {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}