Question

如何在网页上设置动画并增加其大小，同时保持中心固定在某一点？这就是我的尝试：

但可以看出，锚点位于（0,0）而不是文本中心。我尝试使用text-align，但无法得到理想的结果。

HTML：

<button id="button">
  Begin
</button>
<div id="main">
<div id="div">
  Hello World!
</div>  
</div>

CSS：

#main
{
  position: relative; 
}

#div
{
  position:absolute;
  font-size:0em; 
}

@-webkit-keyframes my-animation {
  0%   { font-size: 0em; }
  100% { font-size: 5em; }
}

.effect {
  -webkit-animation: my-animation 1s; /* Safari 4+ */  
  animation: my-animation 1s;
  animation-fill-mode: forwards;  
}

JS：

var e = document.getElementById("button");
var div = document.getElementById("div");
e.addEventListener("click", function()
                  {  
  div.className = "effect";
});

请注意，我无法对main div进行任何更改。另外，我发现使用font-size来制作动画并不会给出非常流畅的动画。

Answer 1

不是动画font-size属性，而是动画transform: scale()。

在文本上设置所需的font-size和transform: scale(0)，然后将其动画为默认的transform: scale(1)比例：

＆＃13;

document.getElementById('button').addEventListener("click", function() {
  document.querySelector('.text').classList.toggle("effect");
});

＆＃13;

.container {
  position: relative;
}

.text {
  position: absolute;
  transform: scale(0);
  font-size: 5em;
}


@-webkit-keyframes grow {
  100% { transform: scale(1); }
}

@keyframes grow {
  100% { transform: scale(1); }
}

.effect {
  -webkit-animation: grow 1s forwards;
  animation: grow 1s forwards;
}

＆＃13;

<button id="button">Begin</button>

<div class="container">
  <span class="text">Hello World!</span>
</div>

＆＃13;

Answer 2

您需要指定保证金：0自动，试试这个：demo 只改变了css部分，

#main {
  position: relative;
}

#div {
  margin:0 auto;;
  text-align: center;
  width:82%;
}

@-webkit-keyframes my-animation {
  0% {
    font-size: 0em;
  }
  100% {
    font-size: 5em;
  }
}

.effect {
  -webkit-animation: my-animation 1s;
  /* Safari 4+ */
  animation: my-animation 1s;
  animation-fill-mode: forwards;
}

`

如何放大HTML文本，同时保持其中心锚定在一个点？

2 个答案: