CSS 自动变大缩小效果实现 - 鼠标悬停过渡动画

如果您想要实现自动变大缩小的效果，可以使用 CSS 的 transition 属性和:hover 伪类来实现。

首先，您需要为该元素添加一个 hover 伪类，当鼠标悬停在该元素上时触发效果。然后，您可以使用 transition 属性来指定元素的过渡效果，如下所示：

div {
  /* 设置初始样式 */
  width: 100px;
  height: 30px;
  transition: width 0.3s, height 0.3s; /* 过渡时间可以根据需要调整 */

  /* 其他样式 */
  background-color: rgb(19, 105, 172);
  color: #fff;
  line-height: 30px;
  text-align: center;
}

div:hover {
  /* 设置鼠标悬停时的样式 */
  width: 150px;
  height: 40px;
}

在上面的示例中，当鼠标悬停在 div 元素上时，宽度和高度会从初始值自动过渡到新的值，从而实现自动变大缩小的效果。

您可以根据需要调整元素的样式和过渡时间来适应您的设计需求。