CSS 鼠标悬停的连续CSS旋转动画,在悬停结束时以动画返回到0度

CSS 鼠标悬停的连续CSS旋转动画,在悬停结束时以动画返回到0度

在本文中,我们将介绍如何使用CSS创建一个连续的旋转动画效果,并在鼠标悬停结束时以动画方式将其恢复到0度。

阅读更多:CSS 教程

创建动画效果

首先,我们需要创建一个HTML元素,在其中添加要应用动画效果的内容。在本例中,我们将使用一个简单的div元素。在HTML中添加以下代码:

<div class="rotation-box">Hello World</div>
HTML

接下来,我们可以使用CSS来创建旋转动画效果。通过@keyframes规则,我们可以定义旋转的起始和结束状态。在本例中,我们将元素从0度旋转到360度。使用以下CSS代码:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotation-box {
  animation: rotation 2s linear infinite;
}
CSS

在上述代码中,我们使用@keyframes规则创建了一个名为“rotation”的动画。起始状态的角度为0度,结束状态的角度为360度。然后,我们将动画应用于名为”rotation-box”的div元素,并且指定动画的持续时间为2秒,动画速度为线性,无限重复。

现在,当我们在浏览器中加载页面时,我们将看到”Hello World”在div元素中以旋转的方式出现,并且会持续不断地旋转下去。

鼠标悬停和动画恢复

为了实现鼠标悬停时暂停旋转动画并在鼠标离开时重新开始动画的效果,我们可以使用CSS的:hover伪类选择器。

.rotation-box:hover {
  animation-play-state: paused;
}

.rotation-box {
  animation: rotation 2s linear infinite;
}
CSS

在上述代码中,我们通过:hover伪类选择器为具有类名”rotation-box”的div元素添加了一个新的CSS规则。当鼠标悬停在元素上时,我们使用animation-play-state属性将动画的播放状态设置为paused,即暂停状态。当鼠标离开元素时,动画将恢复到初始状态并重新开始播放。

现在,当我们将鼠标悬停在div元素上时,旋转动画将暂停,并在鼠标离开时以动画的方式回到0度。

示例

让我们来看一个完整的示例,展示如何在CSS中应用连续的旋转动画并在鼠标悬停结束时以动画方式恢复到0度。

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .rotation-box {
      width: 200px;
      height: 200px;
      background-color: yellow;
      margin: 50px auto;
      animation: rotation 2s linear infinite;
    }

    .rotation-box:hover {
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div class="rotation-box">Hello World</div>
</body>
</html>
HTML

在上述示例中,我们使用了一个黄色的div元素,宽高为200像素,并使用margin属性将其居中显示。当我们在浏览器中打开此示例时,div元素将以旋转的方式不断旋转,当我们将鼠标悬停在其上方时,旋转将暂停,当鼠标离开时动画将以动画的方式回到0度。

总结

本文介绍了如何使用CSS创建连续的旋转动画,并在鼠标悬停结束时以动画方式恢复到0度。我们通过@keyframes规则定义了旋转的起始和结束状态,并使用animation属性将动画应用于指定的HTML元素。通过使用:hover伪类选择器,我们可以实现在鼠标悬停时暂停动画,并在鼠标离开时重新开始动画。这种技术可以为网页中的元素添加动态和吸引人的效果。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册