当前位置：首页 > CSS

css制作花朵

2026-03-11 18:07:01CSS

使用CSS制作花朵

CSS可以通过伪元素、变换和渐变等技术来创建花朵效果。以下是几种常见的实现方法：

花瓣基础形状

花瓣通常使用椭圆或圆形，通过border-radius和transform属性调整形状和位置：

css制作花朵

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

旋转花瓣形成花朵

使用transform-origin和rotate将多个花瓣围绕中心点排列：

css制作花朵

.flower {
  position: relative;
  width: 200px;
  height: 200px;
}
.petal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: left top;
}
/* 每片花瓣旋转不同角度 */
.petal:nth-child(1) { transform: rotate(0deg); }
.petal:nth-child(2) { transform: rotate(60deg); }
.petal:nth-child(3) { transform: rotate(120deg); }

花蕊效果

添加圆形中心点作为花蕊：

.center {
  position: absolute;
  width: 30px;
  height: 30px;
  background: yellow;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

添加动画效果

使用@keyframes让花朵旋转或花瓣摆动：

@keyframes bloom {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
.flower {
  animation: bloom 2s ease-in-out;
}

完整示例代码

<div class="flower">
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="center"></div>
</div>

<style>
.flower {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px;
}
.petal {
  position: absolute;
  width: 60px;
  height: 100px;
  background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
  border-radius: 50% 50% 0 0;
  transform-origin: bottom center;
  top: 0;
  left: 70px;
}
.petal:nth-child(1) { transform: rotate(0deg); }
.petal:nth-child(2) { transform: rotate(60deg); }
.petal:nth-child(3) { transform: rotate(120deg); }
.petal:nth-child(4) { transform: rotate(180deg); }
.petal:nth-child(5) { transform: rotate(240deg); }
.petal:nth-child(6) { transform: rotate(300deg); }
.center {
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #fff, #ffcc00);
  border-radius: 50%;
  top: 80px;
  left: 80px;
  z-index: 10;
}
</style>