CSS動態彩虹背景,是一種很炫酷的效果。它使網頁背景變成了一道緩慢變色的彩虹,增加了網頁的視覺效果和趣味性。
body { /* 定義漸變背景顏色和方向 */ background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-size: 100%; /* 動畫時間 */ -webkit-animation: rainbow 20s linear infinite; /* 添加動畫 */ animation: rainbow 20s linear infinite; } /* 定義動畫 */ @-webkit-keyframes rainbow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes rainbow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
代碼中,我們首先定義了漸變背景的七種顏色和方向,然后使用動畫功能使顏色逐漸變化。也就是說,漸變背景將不斷地重復,最后形成了一個一直變化的彩虹效果。
總的來說,CSS動態彩虹背景不僅讓網頁看起來更加豐富多彩,同時也能吸引更多用戶的關注。它簡單易學,只需幾行代碼就能輕松實現,廣受網頁設計者的喜愛。