CSS隨機變換背景是一種常見的網(wǎng)頁運動效果。它通過JavaScript的Math.random()方法隨機獲取顏色值,實現(xiàn)網(wǎng)頁背景顏色的變換。在以下示例中,我們將演示如何使用CSS和JavaScript來隨機變換背景顏色:
/* CSS代碼 */ body { transition: background-color 1s ease; }
上述代碼使用了CSS3的過渡效果,讓背景色平滑地變換,不會給用戶帶來過于突兀的感覺。
// JavaScript代碼 function randomColor() { // 隨機獲取十六進制顏色值 const color = Math.floor(Math.random() * 16777215).toString(16); // 返回顏色值,前面加#號 return "#" + color; } setInterval(function() { // 獲取body元素 const body = document.querySelector("body"); // 設(shè)置body的背景顏色為隨機顏色 body.style.backgroundColor = randomColor(); }, 1000);
上述JavaScript代碼定義了一個randomColor()函數(shù),用于隨機獲取十六進制顏色值,并且在每隔1秒鐘調(diào)用一次該函數(shù),將返回的顏色值設(shè)置為頁面背景顏色。
通過CSS和JavaScript的配合,我們可以輕松地實現(xiàn)頁面背景顏色的隨機變換效果。