css 制作一个点击按钮一个div从按钮处扭曲放大，到原来大小的动画效果

要现点击按钮时，一个 `<div>` 元素从按钮处扭曲放大到原来大小的动画效果，你可以使用 CSS 的 `transform` 属性和动画关键帧。以下是一个示例：

HTML 代码：

<button id="btn">点击按钮</button>
<div id="box"></div>

CSS 代码：

#btn {
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
}

#box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  transition: transform 0.3s; /* 添加过渡效果 */
}

@keyframes anim {
  0% {
    transform: scale(1); /* 初始状态，正常大小 */
  }
  50% {
    transform: scale(1.5) rotate(45deg); /* 中间状态，扭曲放大 */
  }
  100% {
    transform: scale(1); /* 结束状态，恢复原来大小 */
  }
}

JavaScript 代码：

const button = document.getElementById("btn");
const box = document.getElementById("box");

button.addEventListener("click", () => {
  box.style.animation = "anim 1s ease-in-out"; // 添加动画效果
});

在上述代码中，我们首先定义了一个 `<button>` 元素和一个 `<div>` 元素，并分别为它们设置了相应的样式。通过设置 `transition` 属性，我们为 `<div>` 元素添加了一个 `0.3s` 的过渡效果，使其在改变 `transform` 属性时产生平滑的动画过渡效果。

然后，我们使用 `@keyframes` 来定义动画的关键帧。在 `0%` 的关键帧中，我们将 `<div>` 元素的 `transform` 属性设置为 `scale(1)`，以保持其正常大小。在 `50%` 的关键帧中，我们将 `transform` 属性设置为 `scale(1.5)` 和 `rotate(45deg)`，以实现扭曲放大的效果。最后，在 `100%` 的关键帧中，我们将 `transform` 属性设置回 `scale(1)`，使 `<div>` 元素恢复到原来的大小。

最后，我们使用 JavaScript 代码为按钮添加了一个点击事件监听器。当按钮被点击时，我们通过为 `<div>` 元素添加 `animation` 属性并设置动画名称、持续时间和动画速度曲线，触发动画效果。

你可以根据需要调整样式和动画的属性值来实现想要的扭曲放大动画效果。