css制作树叶转动

2026-04-02 08:02:53CSS

使用CSS动画制作树叶转动效果

通过CSS的transform和animation属性可以创建树叶旋转动画效果。以下是一种实现方法：

HTML结构

<div class="leaf"></div>

CSS样式

.leaf {
  width: 100px;
  height: 100px;
  background: url('leaf.png') no-repeat center center;
  background-size: contain;
  animation: spin 3s infinite linear;
  transform-origin: 30% 70%; /* 设置旋转支点(模拟叶柄位置) */
}

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

实现自然摆动效果

要使树叶摆动更自然，可以使用贝塞尔曲线动画：

.leaf {
  animation: sway 2s infinite ease-in-out alternate;
}

@keyframes sway {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}

复合动画效果

结合旋转和摆动创建更生动的效果：

.leaf {
  animation: 
    spin 10s infinite linear,
    sway 1.5s infinite ease-in-out alternate;
}

使用SVG实现

直接使用SVG树叶图形配合CSS动画：

<svg class="leaf" viewBox="0 0 100 100">
  <path d="M50 10 C70 30,80 60,50 90 C20 60,30 30,50 10" fill="#5a8f3a"/>
</svg>

.leaf {
  width: 80px;
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

多树叶场景

创建多个随机摆动的树叶：

css制作树叶转动

.leaf:nth-child(1) {
  animation-delay: 0s;
  left: 20%;
}
.leaf:nth-child(2) {
  animation-delay: 0.5s;
  left: 50%;
}
.leaf:nth-child(3) {
  animation-delay: 1s;
  left: 80%;
}

这些方法都可以通过调整动画持续时间、旋转角度和贝塞尔曲线来获得不同的树叶运动效果。实际应用中可能需要根据具体设计微调参数。