css 宝石闪光效果

你可以通过使用CSS中的动画效果来实现宝石闪光效果。以下是一种实现方式：

/* 宝石的样式 */
.gem {
  width: 50px;
  height: 50px;
  background-color: #00F;
  border-radius: 50%;
  position: relative;
}

/* 宝石闪烁的动画 */
@keyframes gemBlink {
  0% {
    box-shadow: 0 0 5px #FFF;
  }
  50% {
    box-shadow: 0 0 20px #FFF;
  }
  100% {
    box-shadow: 0 0 5px #FFF;
  }
}

/* 宝石闪烁的样式 */
.gem::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  animation: gemBlink 2s infinite;
}

在上面的代码中，我们定义了一个 `.gem` 类来表示宝石，并且使用 `border-radius` 属性将其变成圆形。然后，我们使用 `::before` 伪元素来实现闪烁的效果。在 `::before` 中，我们使用 `box-shadow` 属性在宝石周围添加白色阴影，并在 `@keyframes` 中定义了宝石闪烁的动画效果。

你可以在HTML中使用以下代码来添加一个宝石：

<div class="gem"></div>

你可以根据需要调整宝石的大小和颜色，并修改动画的持续时间和闪烁效果。