2020-05-28－如何使用CSS在頁面載入時創造淡入效果？

使用動畫和過渡屬性在使用CSS的頁面載入中建立淡入效果。

方法1：使用CSS動畫屬性：CSS動畫由2個關鍵影格定義。一個將不透明度設為0，另一個將不透明度設為1。當動畫類型設定為easy時，動畫在頁面中平滑淡入淡出。

此屬性套用於body標籤。每當頁面加載時，都會播放此動畫，並且頁面看起來會淡入。可以在animation屬性中設定淡入的時間。

程式碼如下：

body {
   animation: fadeInAnimation ease 3s
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
   0% {
       opacity: 0;
   }
   100% {


##範例：

   

   
. / h1>

   
       How to create fade-in effect
       on page load using CSS
 . #        This page will fade in
       This page will fade in
       after loading
   

#2:#2

1112使用過渡屬性，並載入主體

#11-#22-##2-#21-##2-#2-#21-##2。將不透明度設為1：在此方法中，可以將主體初始設為不透明度0，並且每當更改該屬性時，過渡屬性將用於為其設定動畫。

載入頁面時，使用onload事件將不透明度設為1。由於transition屬性，現在變更不透明度將在頁面中消失。淡入的時間可以在transition屬性中設定。

程式碼如下：

body {

   opacity: 0;

   transition: opacity 5s;

}

#例如範例：