文本以缩放效果显示

Question

我们如何以放大效果显示文字。我在一个旅游网站上看到了它。我做谷歌，但无法找到这种效果。我只是想要一点暗示这是什么样的效果。关于缓和但我没有找到相同的效果。我已附上截图。这是该网站http://cleartrip.com/flights?ui=v3的链接。效果在付款页面

上

Answer 1

好的，所以当你做一些事情来让这个部分出现时，它内部的按钮从中心点开始动画从100到100％。所以基本上你要问的是如何通过动画使某些东西从0％增长到100％。可能有一个完全javascript的方式，但我个人会使用css动画。

假设您要向父div添加一个类以显示一部分内容（在您链接到它的示例中显示订单表单的一部分）您需要做的就是在css中添加动画到当部分添加一个类时触发的按钮。在我下面的例子中，我正在调用“页面”部分并假设你要添加一个“主动”类来显示它 - 显然这些可能是你喜欢的任何东西： HTML：

<div class="page">
  <div class="animated_button">Look at me</div>
  [other content that you don't want to animate]
</div>

的CSS：

.page{
  display:none;  
}
.active{
  display:block;
}

.animated_button{
  [styling for how you want your button to look]
}

.active .animated_button{ 
  animation: growUp 0.4s;
}

@keyframes growUp {
  0%   { transform:scale(0); }
  100% { transform:scale(1); }
}

请注意，您可能需要为转换添加供应商前缀。 这是一个codePen - 这里有一些额外的样式和东西只是为了展示它是如何工作的一个例子： http://codepen.io/chrisboon27/pen/weJmL