CSS Hover 动画：实现元素放大旋转效果并仅运行一次

要实现鼠标悬停时元素放大旋转的动画效果，并且该动画只运行一次，你可以使用 CSS 的 animation 属性和 @keyframes 规则来创建动画，并结合 :hover 伪类选择器来触发动画。

首先，你需要定义一个 @keyframes 规则，用于描述元素的动画效果。你可以定义一个从初始状态到最终状态的变化过程。例如，从原始大小到放大一些，并同时旋转一定角度。

@keyframes grow-rotate-animation {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.2) rotate(45deg);
  }
}

上面的代码定义了一个名为 grow-rotate-animation 的动画，从初始状态（0%）到最终状态（100%）。初始状态下，元素的大小为原始大小（scale(1)）且没有旋转（rotate(0deg)）。最终状态下，元素的大小放大 1.2 倍（scale(1.2)）且旋转 45 度（rotate(45deg)）。

接下来，将该动画应用到元素上，以及在鼠标悬停时触发动画。添加以下 CSS 代码：

.grow-rotate {
  animation: grow-rotate-animation 1s forwards;
}

.grow-rotate:hover {
  animation-play-state: paused;
}

上面的代码将 grow-rotate-animation 动画应用到 grow-rotate 元素上，并指定动画持续时间为 1 秒。forwards 参数表示动画结束后保持最终状态。当鼠标悬停在元素上时，使用 animation-play-state: paused 将动画暂停，确保动画只会运行一次。

现在，你可以在 HTML 中使用 grow-rotate 类来应用这个效果了。

<div class="grow-rotate">Hover me</div>

当鼠标悬停在元素上时，它将产生一个 CSS 动画，动画只会运行一次。

注意：上述代码只是示例，你可以根据需要调整动画效果、持续时间和其他样式设置。