css制作星星

CSS 制作星星的方法

使用 CSS 可以轻松创建星星效果，以下是几种常见的实现方式：

使用 Unicode 字符

直接使用 Unicode 中的星星符号，并通过 CSS 调整样式：

.star {
  font-size: 24px;
  color: gold;
}

<span class="star">★</span>
<span class="star">☆</span>

• ★ 是实心星星（Unicode: U+2605）
• ☆ 是空心星星（Unicode: U+2606）

使用 CSS 绘制五角星

通过 clip-path 或伪元素绘制自定义星星：

.star {
  width: 0;
  height: 0;
  color: gold;
  position: relative;
  display: block;
}

.star::before {
  content: "★";
  font-size: 50px;
}

使用 clip-path 绘制复杂星星

通过多边形裁剪路径创建星星形状：

.clip-star {
  background: gold;
  width: 50px;
  height: 50px;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

动画星星

添加闪烁动画效果：

@keyframes blink {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

.blink-star {
  animation: blink 2s infinite;
}

使用 SVG

通过内联 SVG 实现更灵活的星星：

<svg width="50" height="50" viewBox="0 0 24 24">
  <path fill="gold" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z"/>
</svg>

选择建议

• 简单需求：优先使用 Unicode 字符或 SVG。
• 自定义形状：使用 clip-path 或伪元素。
• 动态效果：结合 CSS 动画。