css制作花瓣
使用CSS制作花瓣效果
通过CSS的border-radius和transform属性可以创建花瓣形状，结合动画实现动态效果。
基础花瓣形状
.petal {
width: 100px;
height: 150px;
background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
border-radius: 50% 50% 0 50%;
transform: rotate(45deg);
}旋转多个花瓣形成花朵
.flower {
position: relative;
width: 200px;
height: 200px;
}
.petal {
position: absolute;
width: 80px;
height: 120px;
background: pink;
border-radius: 50% 50% 0 50%;
transform-origin: bottom center;
}
/* 通过rotate创建5个花瓣 */
.petal:nth-child(1) { transform: rotate(0deg); }
.petal:nth-child(2) { transform: rotate(72deg); }
.petal:nth-child(3) { transform: rotate(144deg); }
.petal:nth-child(4) { transform: rotate(216deg); }
.petal:nth-child(5) { transform: rotate(288deg); }添加动画效果
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.flower {
animation: float 3s ease-in-out infinite;
}SVG替代方案（更精确控制）
<svg width="200" height="200">
<path d="M100,50 Q150,80 100,130 Q50,80 100,50"
fill="pink" stroke="#ff6b88"/>
</svg>进阶技巧
- 使用
filter: drop-shadow()添加投影增强立体感 - 通过
mix-blend-mode实现颜色混合效果 - 调整
gradient颜色创造渐变花瓣 - 结合伪元素
:before/:after添加花瓣纹理
完整示例应将花瓣容器设为position: relative，每个花瓣绝对定位并通过旋转形成圆形分布。花瓣数量可通过调整旋转角度增量实现（如6个花瓣使用60度增量）。
