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 动画。
