HTML5是一種新型的網頁排版語言，它具有很多強大的功能和特點，其中之一就是可以輕松地實現頁面變色效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5頁面變色效果</title>
<style>
/* 定義頁面背景顏色 */
body {
background-color: #F5F5F5;
}
/* 定義頁面中心區域的樣式 */
.center {
margin: 0 auto;
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: #FFF;
border: 1px solid #00BFFF;
}
/* 定義鼠標懸停在中心區域時的樣式 */
.center:hover {
background-color: #00BFFF;
color: #FFF;
}
</style>
</head>
<body>
<div class="center">鼠標懸停此處，頁面將變成藍色背景</div>
</body>
</html>如上面的代碼所示，我們通過CSS樣式表定義了頁面中心區域的樣式，以及當鼠標懸停在中心區域時的樣式。在HTML文檔中，我們只需要定義一個DIV容器包裹住中心區域的內容即可。
在運行頁面時，當鼠標懸停在中心區域時，由于定義了:hover樣式，頁面背景顏色將變成藍色，文字顏色也將變成白色。
通過這種方式，我們可以輕松地實現頁面變色效果，使頁面更加具有沉浸感和視覺吸引力。
下一篇文本前面點css