css制作雪花

CSS 制作雪花的方法

使用 CSS 可以创建简单的雪花效果，主要通过伪元素、动画和变换实现。以下是几种常见的方法：

基础雪花形状

通过 ::before 和 ::after 伪元素创建雪花的六边形结构：

.snowflake {
  position: relative;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
}

.snowflake::before, .snowflake::after {
  content: "";
  position: absolute;
  background-color: white;
}

.snowflake::before {
  width: 10px;
  height: 2px;
  top: 4px;
  left: 0;
}

.snowflake::after {
  width: 2px;
  height: 10px;
  left: 4px;
  top: 0;
}

旋转雪花分支

通过 transform 添加更多分支：

.snowflake {
  position: relative;
  width: 20px;
  height: 20px;
}

.snowflake .branch {
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: white;
  top: 5px;
  left: 9px;
  transform-origin: bottom center;
}

.branch:nth-child(1) { transform: rotate(0deg); }
.branch:nth-child(2) { transform: rotate(60deg); }
.branch:nth-child(3) { transform: rotate(120deg); }
.branch:nth-child(4) { transform: rotate(180deg); }
.branch:nth-child(5) { transform: rotate(240deg); }
.branch:nth-child(6) { transform: rotate(300deg); }

添加动画效果

让雪花旋转或飘落：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.snowflake {
  animation: spin 3s linear infinite;
}

@keyframes fall {
  from { transform: translateY(-100px); }
  to { transform: translateY(100vh); }
}

.falling-snowflake {
  animation: fall 5s linear infinite;
}

完整示例

结合形状和动画的完整代码：

<style>
  .snowflake {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 50%;
    animation: fall 5s linear infinite;
  }

  .branch {
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: white;
    top: 6px;
    left: 9px;
    transform-origin: bottom center;
  }

  .branch:nth-child(1) { transform: rotate(0deg); }
  .branch:nth-child(2) { transform: rotate(60deg); }
  .branch:nth-child(3) { transform: rotate(120deg); }
  .branch:nth-child(4) { transform: rotate(180deg); }
  .branch:nth-child(5) { transform: rotate(240deg); }
  .branch:nth-child(6) { transform: rotate(300deg); }

  @keyframes fall {
    from { transform: translateY(-100px) rotate(0deg); }
    to { transform: translateY(100vh) rotate(360deg); }
  }
</style>

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

这些方法可以根据需要调整大小、颜色和动画效果，创造出各种风格的雪花效果。