当前位置：首页 > CSS

css制作花束

2026-01-28 00:57:24CSS

使用 CSS 制作花束

通过 CSS 的伪元素、渐变和变换效果，可以模拟花束的视觉效果。以下是一种实现方法：

HTML 结构

<div class="bouquet">
  <div class="flower"></div>
  <div class="flower"></div>
  <div class="flower"></div>
</div>

CSS 样式

css制作花束

.bouquet {
  position: relative;
  width: 200px;
  height: 300px;
  margin: 50px auto;
}

.flower {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff69b4 30%, #ff1493 70%);
  box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
}

.flower:nth-child(1) {
  top: 50px;
  left: 80px;
  transform: rotate(15deg);
}

.flower:nth-child(2) {
  top: 70px;
  left: 60px;
  transform: rotate(-10deg);
}

.flower:nth-child(3) {
  top: 90px;
  left: 100px;
  transform: rotate(5deg);
}

.flower::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 60px;
  background: linear-gradient(to bottom, #228b22, #2e8b57);
  top: 40px;
  left: 15px;
  transform: rotate(5deg);
  z-index: -1;
}

添加更多细节

可以通过添加叶子和装饰元素增强真实感：

叶子样式

css制作花束

.flower::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 10px;
  background: #2e8b57;
  border-radius: 50% 0;
  top: 80px;
  left: 10px;
  transform: rotate(30deg);
}

包装纸效果

.bouquet::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 200px;
  background: linear-gradient(135deg, #fffacd, #fafad2);
  bottom: 0;
  left: 25px;
  border-radius: 0 0 20px 20px;
  z-index: -2;
}

动画效果

添加轻微摆动动画使花束更生动：

@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}

.bouquet {
  animation: sway 3s ease-in-out infinite;
  transform-origin: bottom center;
}

通过调整颜色、位置和数量，可以创建不同风格的花束效果。这种方法完全使用 CSS 实现，无需图像资源。