在 CSS 中為頁面載入建立淡入效果
淡入效果將元素的不透明度從隱藏增加到可見。選定元素的不透明度將在給定時間內發生變化。
本教程將介紹在 CSS 中載入頁面時實現這種效果的方法。
在 CSS 中使用 animation
屬性和 @keyframes
規則建立淡入效果
我們對淡入效果有了一些瞭解。
此方法將使用 animation
屬性和 @keyframes
規則在頁面載入時實現淡入效果。首先,讓我們瞭解 animation
屬性是如何工作的。
當一個元素的樣式及時從一種樣式更改為另一種樣式時,我們可以判斷它是一個動畫。animation
屬性是 animation-name
、animation-duration
、animation-timing-function
、animation-delay
、animation-iteration-count
和 animation-方向
按順序。
我們可以使用 animation
屬性僅指定 animation-name
和 animation-duration
屬性來建立淡入效果。 @keyframes
規則用於逐漸改變所選元素的 CSS 樣式。
結果,將建立動畫效果。我們使用 @keyframes
規則中的 animation-name
屬性值來選擇動畫以應用漸變樣式。
在@keyframes
規則中,我們使用 to
和 from
等選擇器來應用樣式。to
和 from
選擇器等價於 0%
和 100%
。
使用 to
選擇器應用的樣式將逐漸更改為使用 from
選擇器應用的樣式。更改將與 animation-duration
屬性指定的時間一起發生。
要建立淡入動畫,我們可以使用 @keyframes
規則中的選擇器將頁面的不透明度從 0
更改為 1
。@keyframe
規則的語法如下所示。
@keyframes animation-name {
keyframes-selector {
css-styles;
}
}
例如,在 HTML 的 p
標籤內寫一些文字。
在 CSS 中,選擇 html
標籤並將 animation
屬性設定為 fadein 2s
。這裡,fadein
是 animation-name
,2s
是 animation-duration
。
接下來,使用@keyframes
關鍵字選擇動畫名稱 fadein
,如上面的語法所示。將 0%
寫為第一個關鍵幀選擇器並將 opacity
屬性設定為 0
。
同樣,將另外兩個關鍵幀選擇器寫為 50%
和 100%
,並將 opacity
分別設定為 0.5
和 1
。
在這裡,當頁面載入時,由於不透明度設定為 0
,文字一開始會不太明顯。逐漸地,不透明度會改變,文字將在兩秒鐘內顯示出來。
因此,我們可以使用 animation
屬性來建立淡入效果。
示例程式碼:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
body {
animation: fadein 4s;
}
@keyframes fadein {
0% {
opacity:0;
}
50%{
opacity:0.5;
}
100% {
opacity:1;
}
}
在 CSS 中使用 animate()
JQuery 方法建立淡入效果
這個方法將討論另一種使用 jQuery 在 CSS 中建立淡入效果的方法。
我們可以使用 jQuery 中的 animate()
方法來實現我們的目標。animate()
執行所選元素樣式的漸變以建立動畫效果。
我們可以指定 CSS 樣式並提供動畫的速度。animate()
方法的語法如下所示。
(selector).animate({css-styles}, duration, easing, callback)
當我們使用 animate()
方法時,所選元素的預設樣式將被方法中指定的樣式覆蓋。
出於演示目的,我們將在 HTML 中使用與第一種方法相同的文字。首先,選擇 CSS 的 body
標籤並將 opacity
屬性設定為 0
。
接下來,在 jQuery 中選擇 body
標籤並呼叫 animate()
方法。在方法內部,將樣式中的 opacity
設定為 1
,並將 duration
設定為 2000
。
在下面的示例中,2000
等於兩秒,即動畫的持續時間。最初,當頁面載入時,其不透明度為 0
,並在兩秒內變為 1
。
這樣,使用 jQuery 就實現了淡入效果。
示例程式碼:
body {
opacity: 0;
}
$("body").animate({"opacity": "1"}, 2000);
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn