当前位置：首页 > CSS

纯css雪花制作

2026-02-13 09:37:24CSS

纯CSS雪花制作方法

使用CSS的伪元素和动画属性可以创建出逼真的雪花效果。以下是一种常见的实现方式：

基础雪花结构

在HTML中创建一个容器元素，雪花将通过CSS伪元素生成：

纯css雪花制作

<div class="snowflake"></div>

雪花样式

通过CSS设置雪花的基本形状和动画：

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  filter: blur(1px);
  animation: fall linear infinite;
}

.snowflake::before,
.snowflake::after {
  content: "";
  position: absolute;
  background: white;
  border-radius: 50%;
}

.snowflake::before {
  width: 6px;
  height: 6px;
  top: -8px;
  left: 2px;
}

.snowflake::after {
  width: 4px;
  height: 4px;
  bottom: -6px;
  right: 3px;
}

下落动画

添加雪花飘落的效果：

纯css雪花制作

@keyframes fall {
  0% {
    transform: translateY(-10vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

多雪花效果

使用CSS变量和JavaScript可以创建多个随机位置的雪花：

const snowContainer = document.querySelector('.snow-container');
for(let i=0; i<50; i++) {
  const flake = document.createElement('div');
  flake.className = 'snowflake';
  flake.style.left = `${Math.random()*100}vw`;
  flake.style.animationDuration = `${5+Math.random()*10}s`;
  flake.style.animationDelay = `${Math.random()*5}s`;
  snowContainer.appendChild(flake);
}

高级优化

为增强真实感，可以添加以下样式：

.snowflake {
  box-shadow: 
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff;
}

.snowflake:nth-child(2n) {
  animation-name: fall2;
  filter: blur(2px);
}

@keyframes fall2 {
  0% {
    transform: translateY(-10vh) rotate(180deg);
  }
  100% {
    transform: translateY(100vh) rotate(540deg);
  }
}

这种方法创建的雪花效果轻量且性能友好，适合网页装饰使用。通过调整动画时间、大小和模糊度，可以获得不同的雪景效果。