目录
本文发布于 2年前，其中的信息可能已发生变化，请结合实际情况参考。

CSS动画实现可爱樱花飘落效果

给博客加上樱花飘落的效果，瞬间浪漫指数拉满！今天教大家用纯CSS实现这个可爱的效果 🌸

效果预览

我们要实现的是：樱花花瓣从屏幕顶部不断飘落，每片花瓣的大小、速度、轨迹都略有不同，营造自然的飘落感。

实现原理

樱花飘落效果的核心是：

  • 使用 @keyframes 定义下落动画
  • 通过 translate 控制位置变化
  • 用 rotate 让花瓣旋转
  • JavaScript 动态生成多个花瓣

代码实现

HTML结构

html
<div class="sakura-container">
  <!-- 花瓣由JS动态生成 -->
</div>

CSS样式

css
.sakura-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.sakura {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #ffb7c5, #ff8fab);
  border-radius: 50% 0 50% 50%;
  animation: fall linear infinite;
}

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

JavaScript动态生成

javascript
function createSakura() {
  const container = document.querySelector('.sakura-container');
  const sakura = document.createElement('div');
  sakura.className = 'sakura';

  // 随机位置和动画参数
  const size = Math.random() * 10 + 8;
  const duration = Math.random() * 5 + 5;
  const delay = Math.random() * 5;

  sakura.style.width = size + 'px';
  sakura.style.height = size + 'px';
  sakura.style.left = Math.random() * 100 + '%';
  sakura.style.animationDuration = duration + 's';
  sakura.style.animationDelay = delay + 's';

  container.appendChild(sakura);

  // 动画结束后移除
  setTimeout(() => sakura.remove(), duration * 1000);
}

// 每隔一段时间生成新花瓣
setInterval(createSakura, 300);

樱花效果

优化建议

性能优化

  • 限制同时存在的花瓣数量
  • 使用 will-change 提示浏览器优化
  • 考虑使用 requestAnimationFrame
  • 移动端减少花瓣数量

视觉优化

css
.sakura {
  /* 添加阴影增加立体感 */
  filter: drop-shadow(0 0 2px rgba(255, 183, 197, 0.5));
  /* 不同的花瓣形状 */
  border-radius: 50% 10% 50% 10%;
}

总结

纯CSS实现樱花飘落效果并不复杂，关键在于随机性的控制和性能的优化。这个小效果能给网站增添很多浪漫氛围，特别适合二次元风格的博客。快去试试吧~