文字在放大效果中出現

我們如何在縮放效果中顯示文字。我在一個旅行網站上看到它。我沒有谷歌，但不能找到這種效果。我只是想小小提示這是什麼樣的效果。我關於緩解的紅色，但沒有找到相同的效果。我附上了截圖。這裏是該網站的鏈接http://cleartrip.com/flights?ui=v3。效果是在付款頁面文字在放大效果中出現

來源

2013-05-25 Carlos

您可以在縮放之前添加屏幕嗎？ – WooCaSh

在您接受網站上的條件後，在開始時沒有綠框。你必須做一個效果搜索 – Carlos

好的，所以當你做一些事情使該部分出現時，其中的按鈕從中心點的動畫從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-25 18:00:29

哇！你只是通過CSS來完成的。非常感謝 – Carlos

沒問題。 CSS動畫非常酷，你可以用它們實現很多。如果您想了解更多信息，CSS-tricks有一個有用的介紹，並且列出了您需要用於各種瀏覽器的所有前綴：http://css-tricks.com/snippets/css/keyframe-animation-syntax/ –

文字在放大效果中出現

回答

相關問題