当前位置：首页 > CSS

css制作玫瑰

2026-01-28 02:09:32CSS

使用CSS制作玫瑰

通过CSS的伪元素和动画效果可以创建简单的玫瑰图案。以下是实现方法：

花瓣部分

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

.petal {
  position: absolute;
  width: 40px;
  height: 80px;
  background: #ff6b8b;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: bottom center;
}

花瓣旋转排列

.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: 30px;
  height: 30px;
  background: #ffd700;
  border-radius: 50%;
  top: 35px;
  left: 35px;
  z-index: 2;
}

茎和叶子

.stem {
  position: absolute;
  width: 8px;
  height: 100px;
  background: #228b22;
  top: 100px;
  left: 46px;
}

.leaf {
  position: absolute;
  width: 40px;
  height: 20px;
  background: #228b22;
  border-radius: 50% 0 50% 0;
  top: 130px;
  left: 30px;
  transform: rotate(-30deg);
}

HTML结构

<div class="rose">
  <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 class="stem"></div>
  <div class="leaf"></div>
</div>

动画效果

添加花瓣脉动动画：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.petal {
  animation: pulse 3s infinite ease-in-out;
}

进阶效果

创建多层花瓣：

.inner-petal {
  position: absolute;
  width: 30px;
  height: 60px;
  background: #ff8fab;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: bottom center;
  z-index: 1;
}

这种CSS玫瑰适合作为网页装饰元素，可以通过调整颜色、大小和花瓣数量来创建不同风格的玫瑰效果。

css制作玫瑰