css制作花束

使用CSS创建花束效果

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

HTML结构

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

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

.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: 60px;
  left: 100px;
  transform: rotate(5deg);
}

.stem {
  position: absolute;
  bottom: 0;
  left: 95px;
  width: 10px;
  height: 200px;
  background: linear-gradient(to bottom, #228b22, #2e8b57);
  transform: rotate(2deg);
  z-index: -1;
}

添加叶子装饰

.stem::before, .stem::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 30px;
  background: #2e8b57;
  border-radius: 50% 0;
}

.stem::before {
  top: 80px;
  left: -15px;
  transform: rotate(45deg);
}

.stem::after {
  top: 120px;
  right: -15px;
  transform: rotate(-45deg);
}

花瓣细节增强

为花朵添加更多层次：

.flower::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffb6c1 40%, transparent 70%);
}

动画效果

添加轻微摆动动画：

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

.bouquet:hover {
  animation: sway 2s ease-in-out infinite;
}

包装纸效果

添加花束底部包装：

.bouquet::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 30px;
  width: 140px;
  height: 60px;
  background: linear-gradient(135deg, #f5f5dc 30%, #d2b48c 70%);
  border-radius: 5px;
  transform: perspective(100px) rotateX(20deg);
  z-index: -2;
}

通过组合这些CSS技术，可以创建出具有立体感的花束效果。调整颜色、大小和位置参数可以改变花束的整体风格。