css制作玫瑰
使用CSS绘制玫瑰的方法
通过CSS的border-radius、transform和box-shadow等属性，可以绘制出简单的玫瑰形状。以下是两种常见的实现方式：
花瓣叠加法
通过多个椭圆元素旋转叠加形成花瓣效果：
.rose {
position: relative;
width: 100px;
height: 100px;
}
.petal {
position: absolute;
width: 40px;
height: 80px;
background: #ff4081;
border-radius: 50%;
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); }单元素渐变法
利用box-shadow和伪元素创建多层花瓣：
.rose-simple {
width: 80px;
height: 80px;
position: relative;
}
.rose-simple::before,
.rose-simple::after {
content: "";
position: absolute;
border-radius: 50%;
}
.rose-simple::before {
width: 40px;
height: 40px;
background: radial-gradient(circle, #ff4081 30%, #c2185b 70%);
top: 20px;
left: 20px;
}
.rose-simple::after {
width: 60px;
height: 60px;
box-shadow:
15px 15px 0 #ff80ab,
-15px 15px 0 #ff80ab,
-15px -15px 0 #ff80ab,
15px -15px 0 #ff80ab;
}动画效果增强
添加旋转动画模拟绽放效果：
@keyframes bloom {
0% { transform: scale(0.2); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.petal {
animation: bloom 1.5s ease-out forwards;
animation-delay: calc(var(--n) * 0.1s);
}颜色调整技巧
使用CSS变量方便修改颜色：
:root {
--rose-color: #ff4081;
--shadow-color: #c2185b;
}
.petal {
background: var(--rose-color);
box-shadow: 0 0 10px var(--shadow-color);
}实际应用中可根据需要调整花瓣数量、大小和颜色梯度，更复杂的实现可能需要结合SVG或Canvas技术。
