CSS是構建網頁樣式的基礎語言,它可以實現豐富多彩的效果,其中之一就是動態背景圖片效果。
在CSS中,我們可以使用background-image屬性來添加背景圖片。而通過CSS3的animation屬性,我們可以讓背景圖片產生動態效果,可以是漸變、閃爍、移動等效果。
/* 添加背景圖片 */ body { background-image: url('example.jpg'); background-size: cover; /* 背景圖片適應 */ } /* 添加動畫 */ @keyframes bgAnimation { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } /* 控制背景圖片的移動 */ } body { animation: bgAnimation 10s ease infinite; /* 運行動畫 */ }
以上代碼的意思是:設置一個背景圖片,使用background-image屬性;讓背景圖片移動,這是通過@keyframes關鍵字指定了一個動態規則bgAnimation,然后在body中應用這個動態規則,使用animation屬性,同時設定動畫時間、緩動類型和動畫輪播次數(infinite表示無限輪播)。
這樣一來,頁面的背景圖片就會以一定的間隔,不斷地進行循環平移,呈現出動態的效果。
下一篇css實現菊花圖