CSS控制DOM元素的放大和缩小动画

要通过CSS控制DOM元素的放大和缩小动画，你可以使用@keyframes和animation属性来创建动画效果。以下是一个示例代码，演示如何通过CSS实现DOM元素的放大和缩小动画：

HTML:

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="animated-box"></div>
</body>
</html>

CSS (styles.css):

cssCopy code.animated-box {
  width: 100px; /* 初始宽度 */
  height: 100px; /* 初始高度 */
  background-color: #3498db; /* 背景颜色 */
  animation: zoom 2s infinite alternate;
}

@keyframes zoom {
  0% {
    transform: scale(1); /* 初始缩放比例 */
  }
  100% {
    transform: scale(1.5); /* 最终缩放比例（放大1.5倍） */
  }
}

在这个示例中，我们有一个带有类名animated-box的<div>元素，通过CSS动画实现了放大和缩小的效果。关键的部分是@keyframes规则定义的zoom动画，它在0%到100%范围内使用transform属性来控制元素的缩放。animation属性应用了zoom动画，使其无限循环，alternate选项可以让动画交替进行缩放和放大。