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中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
4 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝?
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
3 週前
By DDD
R.E.P.O.的每個敵人和怪物的力量水平
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
藍王子:如何到達地下室
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多

關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時,你可能會遇到一些令人困惑的現象,比如在開發者工具(d...

在元素個數不固定的情況下如何通過CSS選擇第一個指定類名的子元素在處理HTML結構時,常常會遇到元素個數不�...
