css制作叶片

CSS 制作叶片效果

通过CSS的伪元素、变形和渐变可以创建逼真的叶片效果。以下是实现方法：

基础叶片形状

.leaf {
  width: 100px;
  height: 150px;
  position: relative;
  background: linear-gradient(to bottom, #5d9634, #3d5e1f);
  border-radius: 100% 0 100% 0;
  transform: rotate(45deg);
}

添加叶脉细节

.leaf::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  width: 2px;
  height: 80%;
  background: #8b9662;
  transform: rotate(-10deg);
}

.leaf::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 48%;
  width: 1px;
  height: 60%;
  background: #a3aa7d;
  transform: rotate(20deg);
}

叶片卷曲效果

.leaf-curved {
  transform: rotate(45deg) skewX(10deg);
  box-shadow: -5px 5px 10px rgba(0,0,0,0.2);
}

多叶片组合

.leaf-cluster {
  display: flex;
  gap: 20px;
}

.leaf-cluster .leaf:nth-child(2) {
  transform: rotate(65deg) scale(0.8);
}

.leaf-cluster .leaf:nth-child(3) {
  transform: rotate(25deg) scale(0.6);
}

动画效果

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

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

实现要点

• 使用border-radius不对称值创建自然形状
• 通过伪元素添加叶脉细节
• 多层渐变创造立体感
• transform属性实现各种自然姿态
• 适当使用阴影增强真实感

可通过调整颜色、尺寸和变形参数创建不同植物叶片效果。枫叶可增加更多锯齿边缘，棕榈叶可延长比例，蕨类植物需要更复杂的多重复制变形。