CSS3提供了强大的动画特效功能，可以通过简单的代码实现复杂的动画效果。在本文中，我将向您展示如何使用CSS3实现星球图标的悬停几何爆炸动画特效。

我们需要准备一些基本的HTML和CSS代码，用于创建我们的星球图标。下面是HTML代码：

<div class="planet">
  <div class="inner"></div>
</div>

我们使用一个带有“planet”类的div元素来表示我们的星球，它包含另一个带有“inner”类的div元素，用于表示星球的内部。

我们使用CSS样式来设置星球的基本样式，如下所示：

.planet {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #1c1c1c;
  position: relative;
}

.inner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #292929;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我们使用border-radius属性来创建圆形的星球，使用position属性来将星球的内部div元素相对于星球进行定位，并使用transform属性来将其居中。

我们将使用CSS3动画特效来创建悬停几何爆炸动画。我们需要定义一些关键帧，以使星球的内部div元素在悬停时分解为多个小部分。

以下是我们的CSS代码，用于定义动画特效：

.planet:hover .inner {
  animation: explode 0.5s linear forwards;
}

@keyframes explode {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

.inner:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: #ff2f2f;
  border-radius: 50%;
  transform-origin: top left;
  transform: translate(-50%, -50%) scale(0);
  animation: explode2 0.5s linear forwards;
}

.inner:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  background-color: #ff2f2f;
  border-radius: 50%;
  transform-origin: bottom right;
  transform: translate(50%, 50%) scale(0);
  animation: explode2 0.5s linear forwards;
}

@keyframes explode2 {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    transform:translate(-50%, -50%) scale(1.2);

  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

我们已经成功地实现了星球图标的悬停几何爆炸动画特效。