CSS可以輕松實(shí)現(xiàn)自動(dòng)切換壁紙,具體方法如下:
/* 設(shè)置背景圖片樣式 */ body{ background: url(image1.jpg) no-repeat center fixed; background-size: cover; font-size: 16px; } /* 利用@keyframes設(shè)置動(dòng)畫(huà),讓背景圖漸變切換 */ @keyframes changeBg { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } } /* 開(kāi)始動(dòng)畫(huà) */ body { animation: changeBg 10s infinite; -webkit-animation: changeBg 10s infinite; -moz-animation: changeBg 10s infinite; -o-animation: changeBg 10s infinite; } /* 停止動(dòng)畫(huà) */ body:hover { animation-play-state: paused; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; }
以上代碼首先設(shè)置了body標(biāo)簽的背景樣式,設(shè)置了背景圖片、不重復(fù)、居中、鋪滿(mǎn)全屏。接著使用@keyframes定義了一個(gè)名為changeBg的動(dòng)畫(huà),控制背景圖片的漸變切換效果。最后在body標(biāo)簽中使用animation屬性,控制動(dòng)畫(huà)開(kāi)始、循環(huán)播放,并用:hover偽類(lèi)實(shí)現(xiàn)鼠標(biāo)懸停停止動(dòng)畫(huà)功能。
上一篇mysql方案
下一篇mysql新聞表主要功能