如何让一个div中的文本内容反复增大和减小字体大小？答案

【问题标题】：How to make the text content in a div increase and decrease in font size repeatedly?如何让一个div中的文本内容反复增大和减小字体大小？
【发布时间】：2016-06-07 02:04:00
【问题描述】：

我想知道是否可以让 div 的文本内容每秒重复增加和减少字体大小。这将产生一种效果，即文本在向后移动之前似乎更靠近查看者，理想情况下它会是一个平滑的过渡，并且看起来不像 2 帧 gif。

这是我尝试使用 Javascript 每秒更改字体大小：

<div id="textdiv">ZOOM</div>
<script>
function zoomtext(){
   var textdiv = document.getElementById("textdiv");
   textdiv.style.fontSize = "20px";
   textdiv.style.fontSize = "25px";

   setTimeout(zoomtext, 1000);
}
</script>

这不起作用，我不确定这段代码是否会导致平滑过渡。也许可以通过将字体更改十分之一像素来实现平滑过渡（例如：20px、20.1px、20.2px ……等等直到 25px，然后以同样的方式将其减小回 20px）。

我担心该方法可能会导致 Javascript 函数不断运行，这可能会降低我的页面速度。

有没有更好的方法来获得这种效果？

【问题讨论】：

是假设每次增加时都会向下推，还是只想要缩放效果而不需要容器随文本一起增长？

标签： javascript jquery html css animation

【解决方案1】：

将 CSS 过渡与缩放变换结合使用。字体大小的过渡从来都不是平滑的，transform 上的过渡很便宜。

.grow { 
    transition: all .2s ease-in-out;
}
.grow:hover {
    transform: scale(1.5);
}

可以通过 CSS3 动画实现重复：

.grow {
  width: 100px;
  text-align: center;
  animation: grow-animation 2s linear infinite;
}

@keyframes grow-animation {
  0% { transform: scale(1); }
  50% {transform: scale(2); }
  100% {transform: scale(1); }
}

【讨论】：

【解决方案2】：

您可以使用CSS Animations 实现相同的效果。这也很简单，而且比使用 Javascript 好得多。

您需要为您的元素分配 animation 属性，然后再定义它。

#textdiv {
   animation: textgrowth 1s infinite alternate;
}

@keyframes textgrowth {
    0% {
    font-size: 20px;
    }
    100% {
    font-size: 25px;
    }
}

请务必在 CSS 规则末尾添加 alternate 以使动画来回播放。

【讨论】：

这个答案非常符合“有没有更好的方法来获得这种效果？”这一点。只需一个小提琴就可以让它变得更好：jsfiddle.net/1z4kLduf（另外，对 caniuse 的良好参考）

【解决方案3】：

如果它只是在屏幕上缩放，而不是扩大容器，那么 scale();应该是你要找的：

#textdiv {
  -webkit-animation: zoom1-2 infinite 1s;
          animation: zoom1-2 infinite 1s;
  -webkit-transform-origin:0 0 ;
          transform-origin:0 0 ;
  font-size:20px;
}
@-webkit-keyframes zoom1-2 {
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes zoom1-2 {
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

<div id="textdiv">ZOOM</div>
<div>don't push me</div>

【讨论】：

【解决方案4】：

你可以使用CSS animations来代替javascript。

一些示例 HTML：

<!DOCTYPE html>
    <head>
        <title>keyframes text size animation test</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <p id="textdiv">ZOOM</p>
    </body>
</html>

还有 CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
#textdiv {
    -webkit-animation: adjustText 1s infinite alternate;
    -moz-animation:    adjustText 1s infinite alternate;
    -o-animation:      adjustText 1s infinite alternate;
    animation:         adjustText 1s infinite alternate;
}

@keyframes adjustText {
  from {
    font-size: 20px;
  }

  to {
    font-size: 25px;
  }
}

这是这个例子的working codepen

【讨论】：

【解决方案5】：

试试这个：

function zoomtext(){
   var textdiv = document.getElementById("textdiv");
   var fontSize = textdiv.style.fontSize;
  
   if (fontSize !== '48px') {
     textdiv.style.fontSize = '48px';
   }
   else {
     textdiv.style.fontSize = '21px';
   }

  setTimeout(zoomtext, 1000);
}


zoomtext();

&lt;div id="textdiv"&gt;ZOOM&lt;/div&gt;

【讨论】：

我的代码@Emily 有什么问题？它完全符合您的要求
嗨@sonny 感谢您的回答，我没有否决它，其他人必须有，它确实有效，但不同的答案具有我正在寻找的更平滑的过渡。不过还是谢谢你的回答。