[分享]css3把文字循环放大

CSS3提供了许多有趣的新特性，其中一项是让文字循环放大。下面我们来看看如何实现这个效果：

@keyframes font-scale {
  0% {
    font-size: 20px;
  }
  25% {
    font-size: 30px;
  }
  50% {
    font-size: 40px;
  }
  75% {
    font-size: 30px;
  }
  100% {
    font-size: 20px;
  }
}

p {
  animation: font-scale 2s infinite;
} 

代码解析：

首先，我们使用@keyframes规则来定义一个名为font-scale的动画。它包含了5个关键帧，每个关键帧设置了不同的字体大小。

然后，我们将这个动画应用到了所有的p标签上。设定了2秒的动画时长和infinite循环次数。

这样，当你运行这段代码时，会发现文字会在循环中不断地放大和缩小，产生出一种特殊的视觉效果。

值得注意的是，这种效果有可能会影响到页面的可读性，所以使用时需要谨慎调整字体大小和动画参数。同时，在某些场景下，循环放大的文字也可能会引起用户的不适，因此也需要权衡用户体验和视觉效果。