当前位置：首页 > CSS

css制作星星

2026-02-27 09:17:37CSS

使用纯CSS创建星星

通过CSS的伪元素和transform属性可以绘制五角星形状。以下代码利用::before和::after伪元素构建星形：

.star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  margin: 50px;
  border-right: 50px solid transparent;
  border-bottom: 35px solid gold;
  border-left: 50px solid transparent;
  transform: rotate(35deg);
}

.star::before {
  content: '';
  position: absolute;
  top: -22px;
  left: -53px;
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 35px solid gold;
  border-left: 50px solid transparent;
  transform: rotate(-70deg);
}

.star::after {
  content: '';
  position: absolute;
  top: 2px;
  left: -55px;
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 35px solid gold;
  border-left: 50px solid transparent;
  transform: rotate(-35deg);
}

使用CSS clip-path绘制星星

现代浏览器支持用clip-path创建复杂形状，这种方法更简洁：

.clip-star {
  width: 100px;
  height: 100px;
  background: 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与CSS结合方案

通过内联SVG配合CSS控制样式，可实现更灵活的星星效果：

<div class="svg-star">
  <svg 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" />
  </svg>
</div>

.svg-star svg {
  width: 100px;
  height: 100px;
  fill: gold;
  stroke: #000;
  stroke-width: 1px;
}

.svg-star:hover svg {
  fill: orange;
  transform: rotate(15deg);
  transition: all 0.3s ease;
}

动画闪烁星星效果

添加CSS动画实现星星闪烁效果：

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

@keyframes twinkle {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.1); }
}

css制作星星