javascript - 文字出现放大效果

Question

我们如何才能显示放大效果的文本。我在一个旅游网站上看到的。我谷歌但找不到这种效果。我只是想提示一下这是什么效果。我红一下缓和但没有发现同样的效果。我附上了同样的截图。这是该网站的链接 http://cleartrip.com/flights?ui=v3 .效果在支付页面

Answer 1

好的，所以当您执行某些操作使该部分出现时，其中的按钮会以动画形式从无到中心点的 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); }
}

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