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);
}

这些方法可以组合使用，通过调整颜色、大小和角度参数创建各种不同风格的花瓣和花朵效果。