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