css制作星星

使用 CSS 制作星星

通过 CSS 可以创建各种形状，包括星星。以下是几种实现方式：

使用 Unicode 字符

最简单的方法是直接使用 Unicode 星星字符：

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

HTML:

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

使用 CSS 绘制五角星

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

方法一：clip-path

.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%
  );
}

方法二：伪元素旋转

.star {
  position: relative;
  width: 0;
  height: 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: -25px;
  left: -55px;
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 35px solid gold;
  border-left: 50px solid transparent;
  transform: rotate(-70deg);
}

动画效果

添加旋转动画：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animated-star {
  animation: spin 2s linear infinite;
}

多角星变体

通过调整 clip-path 的坐标点可以创建不同角数的星星，例如六角星：

.six-point-star {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    100% 50%,
    61% 65%,
    50% 100%,
    39% 65%,
    0% 50%,
    39% 35%
  );
}

这些方法可以根据需要组合使用，通过调整颜色、大小和动画参数实现各种视觉效果。