css制作叶子

使用CSS绘制叶子形状

通过CSS的border-radius和transform属性可以创建逼真的叶子形状。以下是两种常见方法：

方法一：基础椭圆变形

.leaf {
  width: 100px;
  height: 150px;
  background: #5cb85c;
  border-radius: 50% 0 50% 50%;
  transform: rotate(45deg);
}

方法二：锯齿边缘叶子

.leaf {
  position: relative;
  width: 120px;
  height: 80px;
  background: #4CAF50;
  border-radius: 50% 15% 50% 30%;
  transform: rotate(-20deg);
}

添加叶脉细节

通过伪元素增强真实感：

.leaf::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  width: 2px;
  height: 80%;
  background: #388E3C;
  transform: translateX(-50%);
}

.leaf::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  width: 60%;
  height: 2px;
  background: #388E3C;
  transform: translateX(-50%) rotate(30deg);
}

动画效果

让叶子轻微摆动：

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

.leaf {
  animation: sway 3s ease-in-out infinite;
  transform-origin: bottom center;
}

进阶3D效果

添加盒阴影创造立体感：

.leaf {
  box-shadow: 
    2px 2px 5px rgba(0,0,0,0.2),
    inset 0 -10px 20px rgba(0,0,0,0.1);
}

颜色渐变

使用CSS渐变增强视觉效果：

.leaf {
  background: linear-gradient(
    to bottom right,
    #81C784,
    #4CAF50
  );
}

这些方法可以组合使用，通过调整尺寸、颜色和变形参数，可以创建各种不同风格的叶子效果。