css 在悬停时开始动画

📌 相关文章

📜 css 在悬停时开始动画 - CSS (1)

📅 最后修改于: 2023-12-03 15:14:21.402000 🧑 作者: Mango

在网页中，我们可以通过 CSS 动画为元素添加不同的动态效果，比如平移、缩放、旋转等等。而在悬停时开始动画，则可以让网页更加生动有趣。

实现方法

实现这种效果最常见的方法是使用 :hover 伪类选择器。当鼠标悬停在元素上方时，就会触发相应的 CSS 动画。

例如，我们要让一个元素在悬停时放大，可以这样写：

.box:hover {
  transform: scale(1.2);
}

上面的代码中，我们通过 transform 属性实现了元素的缩放，将它放大了 1.2 倍。而 :hover 伪类选择器则表示鼠标悬停在这个元素上方时，应用这个 CSS 规则。

完整代码示例

下面是一个完整的代码示例，实现了在悬停时开始动画的效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS 在悬停时开始动画</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #007bff;
      transition: transform 0.3s ease;
    }
    .box:hover {
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在这个代码示例中，我们创建了一个宽高为 100px 的方形元素，并且通过 transition 属性指定了它的变换动画时间和动画过渡方式。当鼠标悬停在这个元素上面时，它就会被放大到原来的 1.2 倍大小。

总结

在网页开发中，使用 CSS 动画可以为页面增加更加生动有趣的效果。在悬停时开始动画是其中一个非常常见的应用，可以通过 :hover 伪类选择器实现。