我想让一个动画容器再次小到初始大小与点击。它可以完美地展开，但我不能再关闭它

您可以使用CSS的动画和JavaScript来实现这个效果。

首先，您可以使用CSS的@keyframes规则来定义一个动画，使动画容器从初始大小缩小到最小大小，然后再展开到初始大小。例如：

@keyframes shrink-expand {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

然后，您可以将这个动画应用到动画容器上，通过添加一个CSS类来触发动画。例如：

.container {
  animation: shrink-expand 1s ease-in-out;
}

接下来，您可以使用JavaScript来监听点击事件，并在点击时给动画容器添加或移除这个CSS类，以触发动画。例如：

var container = document.querySelector('.container');

container.addEventListener('click', function() {
  container.classList.toggle('animate');
});

最后，您可以在HTML中创建一个动画容器，并为其添加初始样式和内容。例如：

<div class="container">
  <p>动画容器</p>
</div>

这样，当您点击动画容器时，它将根据定义的动画效果缩小到最小大小，然后再展开到初始大小。

请注意，这只是一个简单的示例，您可以根据实际需求进行调整和扩展。另外，腾讯云提供了丰富的云计算产品和服务，您可以根据具体需求选择适合的产品。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云