当前位置：首页 > CSS

css制作花朵

2026-01-28 11:09:38CSS

使用CSS制作花朵的方法

通过CSS的伪元素、变形和动画特性可以创建各种花朵效果。以下是几种常见实现方式：

基础花瓣旋转法

利用transform和rotate属性创建花瓣：

css制作花朵

.flower {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
}

.petal {
  position: absolute;
  width: 60px;
  height: 30px;
  background: #ff69b4;
  border-radius: 50% 50% 0 50%;
  transform-origin: bottom right;
}

/* 创建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); }

伪元素实现法

减少HTML结构，使用::before和::after伪元素：

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

.flower::before, .flower::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #ff1493, #ff69b4);
  border-radius: 50%;
}

.flower::before {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.3);
}

.flower::after {
  transform: translate(-50%, -50%) rotate(-45deg) scale(1.3);
}

动画花朵

添加旋转动画效果：

css制作花朵

@keyframes bloom {
  0% { transform: scale(0) rotate(0deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.animated-flower {
  animation: bloom 2s ease-out forwards;
  transform-origin: center;
}

多层花瓣

创建更复杂的花朵结构：

.multi-layer {
  position: relative;
  width: 120px;
  height: 120px;
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.layer-1 .petal { background: #ffb6c1; transform: scale(0.8); }
.layer-2 .petal { background: #ff69b4; transform: scale(0.6); }
.layer-3 .petal { background: #db7093; transform: scale(0.4); }

花蕊效果

添加中心花蕊：

.center {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #ffd700, #daa520);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}