css制作玫瑰

2026-02-27 05:14:17CSS

使用CSS绘制玫瑰

通过CSS的伪元素、变形和渐变可以创建简单的玫瑰效果。以下是一个基础的实现方法：

<div class="rose"></div>

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

.rose::before, .rose::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.rose::before {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #ff3366 0%, #cc0044 70%);
  transform: rotate(45deg);
}

.rose::after {
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, #ff6699 0%, #ff3366 70%);
  top: 20%;
  left: 20%;
  transform: rotate(15deg);
}

更复杂的玫瑰花瓣效果

通过多个伪元素和动画可以创建更逼真的玫瑰：

.rose {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
}

.petal {
  position: absolute;
  width: 60px;
  height: 90px;
  background: linear-gradient(to bottom, #ff99cc, #ff0066);
  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(45deg); }
.petal:nth-child(3) { transform: rotate(90deg); }
.petal:nth-child(4) { transform: rotate(135deg); }
.petal:nth-child(5) { transform: rotate(180deg); }
.petal:nth-child(6) { transform: rotate(225deg); }
.petal:nth-child(7) { transform: rotate(270deg); }
.petal:nth-child(8) { transform: rotate(315deg); }

添加动画效果

让玫瑰花瓣有轻微的摆动效果：

@keyframes petalMove {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-5px); }
}

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

.petal:nth-child(2) { animation-delay: 0.2s; }
.petal:nth-child(3) { animation-delay: 0.4s; }
/* 为每个花瓣设置不同的延迟 */

添加花茎和叶子

.stem {
  width: 8px;
  height: 200px;
  background: linear-gradient(to right, #339933, #66cc66);
  position: absolute;
  top: 150px;
  left: 70px;
  transform: rotate(5deg);
}

.leaf {
  width: 40px;
  height: 20px;
  background: #66cc66;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: absolute;
  top: 220px;
  left: 60px;
  transform: rotate(30deg);
}

这些CSS技巧组合起来可以创建一个简单的玫瑰效果，通过调整颜色、大小和动画参数可以获得不同的视觉效果。更复杂的实现可能需要使用SVG或Canvas技术。

css制作玫瑰