首頁 > web前端 > css教學 > CSS 轉場可以在頁面載入時建立淡入效果嗎?

CSS 轉場可以在頁面載入時建立淡入效果嗎?

Linda Hamilton
發布: 2024-12-25 01:40:10
原創
984 人瀏覽過

Can CSS Transitions Create a Fade-In Effect on Page Load?

使用CSS 過渡在頁面加載時創建淡入效果

是否可以使用CSS 過渡對文本進行淡入淡出效果當頁面加載時?

要達到這種淡入效果,請合併以下CSS 法則:

<h1>test p {</h1><p>margin-top: 25px;<br> font-size: 21px;<br> text-對齊:居中;<br> 不透明度:0;<br> 過渡:不透明度 2s escape-in​​;<br>}<br></p>
登入後複製

現在,要在載入時觸發轉換,您可以使用以下方法之一:

方法1:CSS動畫(不廣泛支援)

<h1>檢定 p {</h1><p>動畫:淡入2s;<br>}</p><p>@keyframes fadein {<br> 來自{ 不透明度:0; }<br> 至{ 不透明度:1; }<br>}<br></p>
登入後複製

方法2:jQuery 或 JavaScript

在文件載入時執行以下 jQuery 腳本:

<br>$("#test p").addClass("load");<br>
登入後複製

使用對應的CSS:

<h1>測試p {</h1> <p>過渡:不透明度2 秒緩入;<br> 不透明度: 0;<br>}</p><h1>測試p.load {</h1><p>不透明度: 1;<br>}<br></p>
登入後複製

方法33333333 : 使用jQuery 的Deferred動畫

延遲觸發動畫並設定持續時間:

<br>$("#test p").delay(1000).animate({不透明度: 1 }, 700);<br>
登入後複製

請注意,不同的方法可能提供不同等級的跨瀏覽器相容性,如所提供的回應中所述。

以上是CSS 轉場可以在頁面載入時建立淡入效果嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板