当前位置：首页 > CSS

css制作叶子旋转

2026-04-02 10:43:36CSS

使用CSS动画制作叶子旋转效果

通过CSS的transform和animation属性可以实现叶子旋转动画。关键点在于定义旋转轴和动画关键帧。

HTML结构

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

CSS样式

.leaf {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 0 100%;
  position: relative;
  animation: rotate 3s infinite linear;
  transform-origin: bottom right;
}

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

添加自然摆动效果

让叶子旋转更自然可以结合多个变换属性，模拟风吹动的效果：

@keyframes natural-rotate {
  0%, 100% { 
    transform: rotate(0deg) skew(0deg);
  }
  25% {
    transform: rotate(15deg) skew(5deg);
  }
  75% {
    transform: rotate(-10deg) skew(-3deg);
  }
}

.leaf {
  animation: natural-rotate 4s infinite ease-in-out;
}

使用SVG实现复杂形状

对于更真实的叶子形状，可以使用SVG配合CSS动画：

<svg class="leaf" viewBox="0 0 100 100">
  <path d="M50 0 Q70 30 50 70 Q30 30 50 0" fill="#4CAF50"/>
</svg>

.leaf {
  width: 100px;
  animation: swing 2s infinite alternate ease-in-out;
  transform-origin: top center;
}

@keyframes swing {
  from { transform: rotate(-15deg); }
  to { transform: rotate(15deg); }
}

3D旋转效果

添加perspective属性实现3D空间旋转：

css制作叶子旋转

.leaf-container {
  perspective: 1000px;
}

.leaf {
  transform-style: preserve-3d;
  animation: rotate3d 5s infinite linear;
}

@keyframes rotate3d {
  0% { transform: rotateY(0) rotateX(20deg); }
  100% { transform: rotateY(360deg) rotateX(20deg); }
}

这些方法可以根据实际需求组合使用，调整动画持续时间、缓动函数和变换属性值来获得最佳视觉效果。