css梅花制作

2026-02-13 04:47:40CSS

使用CSS制作梅花效果

通过CSS的伪元素、旋转和阴影效果可以模拟梅花形状。以下是一种实现方法：

<div class="plum-blossom"></div>

.plum-blossom {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
}

.plum-blossom::before,
.plum-blossom::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: #f06292;
  border-radius: 50%;
  top: 20px;
  left: 20px;
  box-shadow: 
    0 0 10px rgba(0,0,0,0.2),
    40px -40px 0 -10px #f06292,
    -40px -40px 0 -10px #f06292,
    -40px 40px 0 -10px #f06292,
    40px 40px 0 -10px #f06292;
  transform: rotate(45deg);
}

动画效果增强

添加旋转动画使梅花更生动：

.plum-blossom {
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

花瓣渐变颜色

使用径向渐变让花瓣更有层次感：

.plum-blossom::before,
.plum-blossom::after {
  background: radial-gradient(circle, #f8bbd0 0%, #f06292 70%);
}

响应式调整

通过CSS变量控制梅花大小：

.plum-blossom {
  --size: 100px;
  width: var(--size);
  height: var(--size);
}

@media (max-width: 600px) {
  .plum-blossom {
    --size: 60px;
  }
}

多梅花排列

创建梅花群组效果：

css梅花制作

<div class="plum-garden">
  <div class="plum-blossom"></div>
  <div class="plum-blossom"></div>
  <div class="plum-blossom"></div>
</div>

.plum-garden {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.plum-garden .plum-blossom {
  margin: 20px;
  animation-delay: calc(var(--i) * 0.5s);
}