如何使div中的文本内容反复增加和减少字体大小？

I’m wondering if it’s possible to have the text content of a div increase and decrease in font size repeatedly every second. This would give an effect where the text seems to move closer to the viewer before moving back, ideally it would be a smooth transition and wouldn’t look like a 2 frame gif.

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

This is my attempt using Javascript to change the font size every second:

这是我尝试使用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>

This isn’t working, and I’m not sure that this code would result in a smooth transition. Perhaps it’s possible to make a smooth transition by changing the font by tenths of a pixel (for example: 20px, 20.1px, 20.2px …and so on until 25px, and then decreasing it back to 20px in the same way).

这不起作用,我不确定此代码是否会导致平滑过渡。也许可以通过将字体改变十分之一像素来进行平滑过渡(例如:20px,20.1px,20.2px ......等等,直到25px,然后以相同的方式将其减少回20px)。

I’m worried that method might result in a Javascript function running constantly, which might slow down my page.

我担心这种方法可能导致Javascript函数不断运行,这可能会减慢我的页面速度。

Is there a better way to get this effect?

有没有更好的方法来达到这个效果?

5 个解决方案

#1

You can achieve the same effect using CSS Animations. It's pretty easy, too, and far better than using Javascript for that.

您可以使用CSS动画实现相同的效果。它也很简单,也比使用Javascript好得多。

You need to assign your element the animation property, which you then define.

您需要为元素指定动画属性,然后定义该属性。

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

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

Be sure to add alternate at the end of your CSS rule to make the animation go back and forth.

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

#2

Use CSS transitions with scale transformation. Font-size transitions are never smooth, and transitions on transform are cheap.

使用带有比例变换的CSS过渡。字体大小过渡从不平滑,变换过渡很便宜。

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

Repetition can be accomplished through CSS3 animations:

重复可以通过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); }
}

#3

Instead of javascript you could use CSS animations.

而不是javascript你可以使用CSS动画。

Some example HTML:

一些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>

And the CSS

和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;
  }
}

Here's a working codepen of this example

这是这个例子的工作代码

#4

if it is only zoom at screen , and not growing the container too, then scale(); should be what you look for:

如果它只是在屏幕上缩放,而不是也不增长容器,那么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>

#5

Try this one:

试试这个:

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();

<div id="textdiv">ZOOM</div>

#1