css制作星星
使用CSS制作星星
在CSS中，可以通过多种方式制作星星效果，包括使用纯CSS形状、Unicode字符或SVG。以下是几种常见的方法：
使用Unicode字符
最简单的星星可以通过Unicode字符直接显示：
<span style="font-size: 24px;">★</span>
<span style="font-size: 24px;">☆</span>★ 是实心五角星（Unicode: U+2605），☆ 是空心五角星（Unicode: U+2606）。
使用CSS绘制五角星
通过CSS的伪元素和transform属性可以绘制自定义的五角星：
<div class="star"></div>.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 50px 0;
border-right: 50px solid transparent;
border-bottom: 35px solid gold;
border-left: 50px solid transparent;
transform: rotate(35deg);
}
.star:before {
content: '';
position: absolute;
top: -22.5px;
left: -32.5px;
display: block;
width: 0;
height: 0;
border-right: 30px solid transparent;
border-bottom: 20px solid gold;
border-left: 30px solid transparent;
transform: rotate(-35deg);
}
.star:after {
content: '';
position: absolute;
top: 1.5px;
left: -52.5px;
display: block;
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid gold;
border-left: 50px solid transparent;
transform: rotate(-70deg);
}使用CSS clip-path
通过clip-path可以创建更精确的星星形状：
.star {
width: 100px;
height: 100px;
background-color: gold;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
}使用SVG内联
SVG是创建复杂星星形状的理想选择：
<svg width="100" height="100" viewBox="0 0 100 100">
<polygon points="50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35" fill="gold"/>
</svg>动画星星效果
可以为星星添加动画效果，比如闪烁：
@keyframes twinkle {
0% { opacity: 0.2; }
50% { opacity: 1; }
100% { opacity: 0.2; }
}
.star {
animation: twinkle 2s infinite;
}以上方法可以根据需求选择，Unicode字符最简单，CSS绘制适合自定义样式，SVG则提供最高的灵活性和清晰度。
