沐鳴測速登錄地址_CSS如何在頁面加載時創建淡入效果？

沐鳴測速

想要使用css在頁面加載上創建淡入效果，可以使用css的animation屬性或transition屬性在頁面加載時創建淡入效果。下面就來通過示例來介紹一下。

方法1：使用CSS animation屬性

通過2個關鍵幀來定義CSS動畫：一個不透明度設置為0，另一個不透明度設置為1。此屬性應用於body標記；當動畫的類型設置為ease時，動畫會在頁面中平滑淡入。每當頁面加載時，這個動畫就會播放，頁面就會出現淡入。淡入的時間也可以在動畫屬性中設置。

語法：

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

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何使用CSS在頁面加載時創建淡入效果</title>
	<style> 
        body { 
            animation: fadeInAnimation ease 3s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
        } 
        @keyframes fadeInAnimation { 
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
        } 
    </style> 
</head> 
   
<body> 
    <h1> Hello world!</h1> 
      
    <b> 使用CSS在頁面加載時創建淡入效果</b> 
      
    <p>加載后此頁將淡入</p> 
</body> 
   
</html>

方法2：使用“Transition”屬性並在加載頁面時將“Opacity”設置為1

首先將body的opacity屬性設置為0，並且每次更改該屬性時，都使用“transition”屬性使其具有動畫效果。然後在加載頁面時，使用onload事件將opacity屬性設置為1。由於“transition”屬性，現在更改opacity屬性將在頁面中显示為淡入淡出。淡入的時間可以在transition屬性中設置。

語法：

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

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何使用CSS在頁面加載時創建淡入效果</title>
	<style> 
        body { 
            opacity: 0; 
            transition: opacity 5s; 
        }
    </style> 
</head> 
   
<body onload="document.body.style.opacity='1'"> 
    <h1> Hello world!</h1> 
      
    <b> 使用CSS在頁面加載時創建淡入效果</b> 
      
    <p>加載后此頁將淡入</p> 
</body> 
   
</html>

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/7547