css制作花瓣

使用 CSS 制作花瓣

通过 CSS 的 border-radius 和 transform 属性可以创建花瓣形状。以下是一个简单的实现方法：

.petal {
  width: 100px;
  height: 150px;
  background-color: pink;
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
}

制作多瓣花朵

将多个花瓣围绕中心点旋转排列，可以形成完整的花朵：

.flower {
  position: relative;
  width: 200px;
  height: 200px;
}

.petal {
  position: absolute;
  width: 80px;
  height: 120px;
  background-color: #ff69b4;
  border-radius: 50% 50% 0 50%;
  top: 40px;
  left: 60px;
  transform-origin: bottom center;
}

/* 创建8个花瓣 */
.petal:nth-child(1) { transform: rotate(0deg); }
.petal:nth-child(2) { transform: rotate(45deg); }
.petal:nth-child(3) { transform: rotate(90deg); }
.petal:nth-child(4) { transform: rotate(135deg); }
.petal:nth-child(5) { transform: rotate(180deg); }
.petal:nth-child(6) { transform: rotate(225deg); }
.petal:nth-child(7) { transform: rotate(270deg); }
.petal:nth-child(8) { transform: rotate(315deg); }

添加花蕊

为花朵中心添加圆形花蕊：

.center {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: yellow;
  border-radius: 50%;
  top: 80px;
  left: 80px;
  z-index: 10;
}

动画效果

为花瓣添加悬停动画效果：

.petal {
  transition: transform 0.3s ease;
}

.flower:hover .petal {
  transform: rotate(var(--deg)) scale(1.1);
}

不同形状花瓣

通过调整 border-radius 值可以创建不同形状的花瓣：

.rounded-petal {
  border-radius: 30% 70% 50% 50%;
}

.pointed-petal {
  border-radius: 50% 50% 0 0;
}

这些 CSS 技巧可以组合使用，创造出各种风格的花瓣和花朵效果。通过调整尺寸、颜色和旋转角度，能够实现多样化的设计。