1

我们如何以放大效果显示文本。我在一个旅游网站上看到的。我做了谷歌，但找不到这种效果。我只是想要一点提示这是什么效果。我对宽松感到满意，但没有发现同样的效果。我已经附上了相同的截图。这是该网站的链接http://cleartrip.com/flights?ui=v3。效果在支付页面在此处输入图像描述

4

1 回答 1

2

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

于 2013-05-25T18:00:29.523 回答