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);
position: absolute;
}创建完整花朵
将多个花瓣组合旋转不同角度可形成花朵效果：
.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;
}
/* 创建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); }添加花蕊效果
使用伪元素创建中心花蕊：
.flower::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
background: yellow;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}动画效果
添加旋转动画使花朵更生动：
.flower {
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}花瓣阴影效果
通过box-shadow增加立体感：
.petal {
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}这些方法可以组合使用，通过调整颜色、大小和角度参数创建各种不同风格的花瓣和花朵效果。
