[分享]css制作连续缩放的动画

CSS是一种页面样式语言，可以用来制作各种动画效果。今天我们来分享一种制作连续缩放动画的方式。

.box{
  animation: scale 1s infinite;
  transform-origin: center center;
}

@keyframes scale{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(0.5);
  }
  100%{
    transform: scale(1);
  }
} 

首先，我们需要一个盒子元素，用class名称为.box来表示。然后，我们通过animation属性来指定一个名为scale的动画，在1秒内无限播放。transform-origin属性指定变换的原点为盒子中心。

接着，我们定义了一个名为scale的关键帧动画。在0%时，盒子的大小保持为1，即不发生缩放。在50%时，盒子缩小为原来的一半，即scale(0.5)。最后，在100%时，盒子回归原始大小，即scale(1)。

以上代码的实现通过CSS3的transform属性和关键帧动画实现，可以很容易地制作出一个连续缩放的动画效果。如果需要更改动画的速度、时长、缩放比例等相关参数，只需要调整相应的值即可。