css制作叶子
使用CSS制作叶子效果
通过CSS的border-radius和transform属性可以创建叶子形状，结合伪元素（::before、::after）实现细节。
基础叶子形状
.leaf {
width: 100px;
height: 150px;
background: #4CAF50;
border-radius: 50% 0 50% 50%;
transform: rotate(45deg);
}添加叶脉细节
.leaf::before {
content: "";
position: absolute;
top: 10%;
left: 50%;
width: 2px;
height: 70%;
background: #2E7D32;
transform: translateX(-50%);
}动态效果（悬停旋转）
.leaf:hover {
transform: rotate(45deg) scale(1.1);
transition: transform 0.3s ease;
}进阶多色渐变叶子
使用linear-gradient和阴影增强立体感：
.fancy-leaf {
width: 120px;
height: 180px;
background: linear-gradient(135deg, #81C784 0%, #4CAF50 50%, #2E7D32 100%);
border-radius: 60% 20% 60% 40%;
transform: rotate(-30deg);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}SVG结合CSS方案
对于更复杂的叶脉纹理，推荐内联SVG：
<div class="svg-leaf">
<svg viewBox="0 0 100 150">
<path d="M50,0 C70,30 80,70 50,150 C20,70 30,30 50,0 Z" fill="#4CAF50"/>
<path d="M50,10 L50,140" stroke="#2E7D32" stroke-width="1.5"/>
</svg>
</div>CSS控制SVG动画
.svg-leaf svg {
transition: transform 0.5s;
}
.svg-leaf:hover svg {
transform: rotate(10deg) scale(1.05);
}关键点：
- 通过调整
border-radius百分比值控制叶尖弧度 - 使用
transform-origin改变旋转基准点模拟自然摆动 - 多层伪元素叠加可创建叶缘锯齿效果
- 配合CSS变量实现颜色动态变化
