极客教程CSS 鼠标悬停的连续CSS旋转动画，在悬停结束时以动画返回到0度
在本文中，我们将介绍如何使用CSS创建一个连续的旋转动画效果，并在鼠标悬停结束时以动画方式将其恢复到0度。
阅读更多：CSS 教程
创建动画效果
首先，我们需要创建一个HTML元素，在其中添加要应用动画效果的内容。在本例中，我们将使用一个简单的div元素。在HTML中添加以下代码：
接下来，我们可以使用CSS来创建旋转动画效果。通过@keyframes规则，我们可以定义旋转的起始和结束状态。在本例中，我们将元素从0度旋转到360度。使用以下CSS代码：
在上述代码中，我们使用@keyframes规则创建了一个名为“rotation”的动画。起始状态的角度为0度，结束状态的角度为360度。然后，我们将动画应用于名为”rotation-box”的div元素，并且指定动画的持续时间为2秒，动画速度为线性，无限重复。
现在，当我们在浏览器中加载页面时，我们将看到”Hello World”在div元素中以旋转的方式出现，并且会持续不断地旋转下去。
鼠标悬停和动画恢复
为了实现鼠标悬停时暂停旋转动画并在鼠标离开时重新开始动画的效果，我们可以使用CSS的:hover伪类选择器。
在上述代码中，我们通过:hover伪类选择器为具有类名”rotation-box”的div元素添加了一个新的CSS规则。当鼠标悬停在元素上时，我们使用animation-play-state属性将动画的播放状态设置为paused，即暂停状态。当鼠标离开元素时，动画将恢复到初始状态并重新开始播放。
现在，当我们将鼠标悬停在div元素上时，旋转动画将暂停，并在鼠标离开时以动画的方式回到0度。
示例
让我们来看一个完整的示例，展示如何在CSS中应用连续的旋转动画并在鼠标悬停结束时以动画方式恢复到0度。
在上述示例中，我们使用了一个黄色的div元素，宽高为200像素，并使用margin属性将其居中显示。当我们在浏览器中打开此示例时，div元素将以旋转的方式不断旋转，当我们将鼠标悬停在其上方时，旋转将暂停，当鼠标离开时动画将以动画的方式回到0度。
总结
本文介绍了如何使用CSS创建连续的旋转动画，并在鼠标悬停结束时以动画方式恢复到0度。我们通过@keyframes规则定义了旋转的起始和结束状态，并使用animation属性将动画应用于指定的HTML元素。通过使用:hover伪类选择器，我们可以实现在鼠标悬停时暂停动画，并在鼠标离开时重新开始动画。这种技术可以为网页中的元素添加动态和吸引人的效果。