css五角心收藏点亮,CSS3 发光的五角星

您好！感谢您的提问。要实现收藏点亮和发光的五角星，可以使用 CSS3 的伪元素和动画效果来完成。

下面是一个简单的实现方式：

HTML 代码：

<div class="heart"></div>
<div class="star"></div>

CSS 代码：

.heart {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #f00 transparent transparent transparent;
  transform: rotate(-45deg);
}

.heart::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #f00;
  border-radius: 10px 10px 0 0;
}

.star {
  position: relative;
  width: 0;
  height: 0;
  margin-top: 50px;
  border-style: solid;
  border-width: 25px 10px 0 10px;
  border-color: #ff0 transparent transparent transparent;
  transform: rotate(-35deg);
  animation: shine 1s infinite;
}

.star::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -25px;
  width: 10px;
  height: 10px;
  background-color: #ff0;
  border-radius: 50%;
}

@keyframes shine {
  0% {
    box-shadow: 0 0 10px #ff0;
  }
  50% {
    box-shadow: 0 0 20px #ff0;
  }
  100% {
    box-shadow: 0 0 10px #ff0;
  }
}

解释：

- .heart 和 .star 分别表示五角心和五角星的元素。
- 五角心通过设置 border 样式来实现，通过 transform 属性旋转 45 度。
- 通过伪元素 ::after 来添加红色的点亮效果。
- 五角星同样通过设置 border 样式来实现，通过 transform 属性旋转 35 度。
- 通过伪元素 ::after 来添加黄色的发光效果。
- 通过 animation 属性添加发光动画效果。

效果如下图所示：