CSS 实现 Hover 悬停放大效果 - 简单教程

这是一种常见的网页设计效果，可以通过 CSS 实现。可以使用 ':hover' 伪类选择器来设置当鼠标悬停在某个元素上时的样式，然后使用 transform 属性来实现元素的缩放效果。

示例代码如下：

HTML:

<div class='hover-effect'>悬停效果</div>

CSS:

.hover-effect {
  transition: transform 0.3s; /* 设置变换过渡时间 */
}

.hover-effect:hover {
  transform: scale(1.2); /* 设置放大倍数 */
}

在上面的例子中，当鼠标悬停在带有 '.hover-effect' 类的元素上时，会触发 ':hover' 伪类选择器的样式设置，使元素的缩放比例变为 1.2 倍，实现了 hover 上去就变大的效果。