CSS 轉場能否在頁面載入時為文字建立淡入效果？

使用CSS 在頁面加載時實現淡入效果

能否有效地利用CSS 過渡來使文本段落隨著頁面的加載而淡入頁面加載？

當然可以。 CSS 過渡為這種視覺效果提供了一個簡單的解決方案。請考慮以下步驟：

第1 步：定義CSS

建立指定文字段落的初始可見性的CSS 規則：

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    transition: opacity 2s ease-in;  
}

• opacity: 0將其不透明度設為，使段落最初不可見0.
• margin-top: 25px 和 font-size: 21px 調整其樣式。
• text-align: center 將文字置中。
• transition: 不透明度 2s 輕鬆-在;設定過渡的持續時間和緩動效果。

第 2 步：切換不透明度

要觸發過渡，您需要更改頁面載入後的段落。這可以使用以下方法實現：

方法1：CSS 動畫（自呼叫）

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#test p { ... } /* Apply the fadein animation */

方法2：jQuery 或純JavaScript

• jQuery: $("#test p").addClass("load");
• 純 JavaScript: document.getElementById("test").children[0].className = " load";

第3步：調整「載入」類別的CSS

新增類別後，定義段落的樣式當它處於「載入」狀態時：

#test p.load {
    opacity: 1;
}

或者，您可以使用JavaScript 直接變更不透明度。

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