如何使用 CSS 在页面加载时创建淡入效果？

使用动画和过渡属性在使用 CSS 的页面加载时创建淡入效果。

方法 1：使用 CSS 动画属性：一个 CSS 动画定义为 2 个关键帧。一个不透明度设置为0，另一个不透明度设置为1。当动画类型设置为ease时，动画在页面中平滑淡出。此属性应用于 body 标记。每当页面加载时，就会播放此动画，页面将出现淡入。淡入的时间可以在动画属性中设置。

句法：

body {
    animation: fadeInAnimation ease 3s
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
  
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

例子：

   

    
   
    

   

    

        GeeksForGeeks
    
      
    
        How to create fade-in effect
        on page load using CSS
    
      
    

        This page will fade in
        after loading
    

   

输出：

方法2：使用transition属性，在body加载时将opacity设置为1：在这种方法中，body可以初始设置为opacity 0，并且transition属性用于在此属性改变时设置动画。加载页面时，使用 onload 事件将不透明度设置为 1。由于过渡属性，现在更改不透明度将在页面中淡出。淡入的时间可以在 transition 属性中设置。

句法：

body {
    opacity: 0;
    transition: opacity 5s;
}

例子：

  

    
  
    

  

      
    

        GeeksForGeeks
    
      
    
        How to create fade-in effect
        on page load using CSS
    
      
    

        This page will fade in
        after loading
    

  
                    

输出：