许愿池雪花：用JavaScript代码点缀网页

2023-10-16 07:32:34

代码片段：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="snowflake-container">
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    ...
  </div>
  <script src="script.js"></script>
</body>
</html>

#snowflake-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.snowflake {
  position: absolute;
  top: -50px;
  left: random(0, 100);
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  animation: snowflake-fall 5s linear infinite;
}

@keyframes snowflake-fall {
  0% {
    top: -50px;
  }
  100% {
    top: 100%;
  }
}

const snowflakeContainer = document.getElementById('snowflake-container');

const snowflakes = document.querySelectorAll('.snowflake');

function createSnowflake() {
  const snowflake = document.createElement('div');
  snowflake.classList.add('snowflake');
  snowflake.style.top = '-50px';
  snowflake.style.left = `${Math.random() * 100}%`;

  snowflakeContainer.appendChild(snowflake);
}

function animateSnowflakes() {
  snowflakes.forEach((snowflake) => {
    snowflake.style.animation = 'snowflake-fall 5s linear infinite';
  });
}

createSnowflake();
animateSnowflakes();

独具匠心的许愿池

运用JavaScript代码，您能够创造出如同漫天飞舞的雪花飘落到许愿池中，为您的网页注入灵动气息。使用纯洁的白色或晶莹剔透的蓝色等色调，让雪花更加逼真。此外，您可以尝试添加一些许愿墙的功能，让用户在网页上写下自己的心愿，然后点击许愿按钮，让雪花承载着这些美好心愿，缓缓飘落至许愿池中，形成唯美的画面。