HTML和CSS实现div放大缩小动画

HTML和CSS可以结合使用来创建div元素的放大缩小动画效果。这通常通过CSS的`transform`属性和`transition`属性来完成。以下是基本步骤：

1. **HTML结构**:

<div class="zoom-container">
  <img src="your-image-source" class="zoom-image"> <!-- 或者直接嵌入文本 -->
</div>

2. **CSS样式**:

.zoom-container {
  position: relative;
  overflow: hidden; /* 防止内容超出容器 */
}

.zoom-image {
  transition: transform 0.5s ease; /* 设置过渡效果持续时间和缓动函数 */
  transform-origin: center center; /* 指定缩放中心点 */
}

.zoom-image:hover {
  transform: scale(1.2); /* 缩放比例，例如从1.0到1.2表示放大 */
}

在这个例子中，当鼠标悬停在`.zoom-image`上时，它会平滑地从原始大小放大20%。`scale()`函数用于改变元素的大小。