程序笔记

Javascript实现下雪的特效

2024-07-07 33

为了实现真实自然的雪花飘落效果，可以利用JavaScript和CSS来创建一个动画。下面是一个基本的示例，展示了如何使用CSS和JavaScript实现雪花的下落效果：

HTML：

<!DOCTYPE html>
<html>
<head>
  <title>下雪特效</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000;
    }
    .snowflake {
      position: absolute;
      color: #fff;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <script src="snowEffect.js"></script>
</body>
</html>

JavaScript (snowEffect.js)：

function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');
    snowflake.innerHTML = '❄'; // 雪花的图标可以更改
  
    const size = Math.random() * 20 + 10; // 雪花大小范围
    let initialX = Math.random() * window.innerWidth;
    let initialY = -10 - Math.random() * 500; // 从顶部之外的随机位置开始下落
  
    snowflake.style.fontSize = `${size}px`;
    snowflake.style.left = `${initialX}px`;
    snowflake.style.top = `${initialY}px`;
  
    document.body.appendChild(snowflake);
  
    const drift = Math.random() * 2 - 1; // 飘落的随机偏移量
    const speed = Math.random() * 3 + 1; // 雪花的下落速度
  
    function moveSnowflake() {
      initialY += speed;
      initialX += drift;
  
      snowflake.style.top = `${initialY}px`;
      snowflake.style.left = `${initialX}px`;
  
      if (initialY < window.innerHeight && initialX > 0 && initialX < window.innerWidth) {
        requestAnimationFrame(moveSnowflake);
      } else {
        snowflake.remove();
        createSnowflake(); // 创建新的雪花
      }
    }
  
    moveSnowflake();
  }
  
  function snowfall() {
    setInterval(createSnowflake, 300); // 控制雪花的生成速度
  }
  
  snowfall();

这个示例通过 JavaScript 动态创建雪花元素，并模拟了它们随机自然的飘落轨迹。每隔一段时间就会创建一个新的雪花元素，以模拟下雪的效果。你可以根据需要调整雪花的样式、速度和数量来满足你的设计需求。

运行效果：

在线示例：

https://www.leavescn.com/files/demos/1-snow/snow.html

更新于：2个月前

赞一波！

文章评论

全部评论

雷达智富

雷达智富

程序笔记

Javascript实现下雪的特效

相关文章

文章评论