文字动态地变大变小（CSS）

要在CSS中动态地改变文字大小，可以使用@keyframes规则创建一个动画，然后将该动画应用到需要改变大小的文本元素上。以下是一个示例，演示如何使文字大小在一定时间内从小变大，然后再变小：

css部分：

/* 定义一个名为 resizeText 的动画 */
@keyframes resizeText {
  0% {
    font-size: 12px; /* 动画开始时的文字大小 */
  }
  50% {
    font-size: 18px; /* 动画进行中时文字大小变为最大 */
  }
  100% {
    font-size: 12px; /* 动画结束时文字大小恢复原始大小 */
  }
}


/* 应用动画到具有 class="text-resize" 的元素 */
.text-resize {
  animation: resizeText 2s infinite; /* 动画名称，持续时间，和重复次数 */
}

 

接下来，在HTML中，你只需要给需要变大变小的文本添加text-resize类：

html<div class="text-resize">这段文字会变大变小。</div>

这段代码会使得类为text-resize的文本在2秒内从12px变为18px，然后再变回12px，并无限循环该过程。