CSS 实现雪花飘飘，让冬日雪景在指尖绽放

2024-01-28 20:59:03

在寒冷的冬季，漫天飞舞的雪花总是让人心生向往。雪花轻盈飘扬，在空中旋转着、坠落着，构成了一幅美丽而又浪漫的景象。如果你也想在自己的网站或博客中添加一个雪花飘飘的场景，那么 CSS3 将是你的好帮手。

CSS3 是一种强大的样式表语言，它提供了许多与动画相关的属性，比如 transform、transition 和 animation。这些属性可以让你轻松地创建各种动画效果，包括雪花飘飘的效果。

实现雪花飘飘的 CSS 代码

/* 雪花容器 */
.snow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 雪花 */
.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0.8;
  animation: snowflake-fall 5s linear infinite;
}

/* 雪花下落动画 */
@keyframes snowflake-fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}

这段代码首先定义了一个雪花容器，它将包含所有的雪花。然后，定义了雪花样式，包括大小、颜色、透明度和动画效果。最后，定义了雪花下落动画，它将使雪花从顶部向下移动。

使用 JavaScript 控制雪花数量和速度

你可以使用 JavaScript 来控制雪花数量和速度。例如，你可以通过改变雪花容器的大小来改变雪花数量，或者通过改变动画持续时间来改变雪花速度。

// 获取雪花容器
var snowContainer = document.querySelector('.snow-container');

// 创建 100 个雪花
for (var i = 0; i < 100; i++) {
  var snowflake = document.createElement('div');
  snowflake.classList.add('snowflake');
  snowContainer.appendChild(snowflake);
}

// 设置雪花速度
var animationDuration = 5000; // 毫秒
snowContainer.style.animationDuration = animationDuration + 'ms';