文字以放大效果顯示

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

請注意，您可能需要為轉換添加供應商前綴。 這是一個CodePen-里面還有一些其他樣式和內容，只是為了展示其工作方式示例： http : //codepen.io/chrisboon27/pen/weJmL