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

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

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

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

<h1 id="test-p">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 id="檢定-p">檢定 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 id="測試p">測試p {</h1> <p>過渡：不透明度2 秒緩入；<br> 不透明度： 0;<br>}</p><h1 id="測試p-load">測試p.load {</h1><p>不透明度: 1;<br>}<br></p>

方法33333333 : 使用jQuery 的Deferred動畫

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

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

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

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