效果說明 當(dāng)鼠標(biāo)移動(dòng)到網(wǎng)站頁面中時(shí),箭頭外形的鼠標(biāo)將變成一個(gè)不斷走動(dòng)的恐龍動(dòng)畫鼠標(biāo),如圖 31-1 所示。

創(chuàng)作思想 在網(wǎng)頁中添加一個(gè) body 標(biāo)簽的 CSS 樣式,在【 body 的 CSS 樣式定義】對(duì)話框里的擴(kuò)展選項(xiàng)中定義新的光標(biāo)。
操作步驟
( 1 )使用【新建】命令插入 body 標(biāo)簽 CSS 樣式,如圖 31-2 所示。

( 2 )在擴(kuò)展選項(xiàng)中的【光標(biāo)】一項(xiàng)中輸入“ url(dinosaur.ani) ”,然后單擊確定按鈕,如圖 31-3 所示。
注重:在這里“ dinosaur.ani ”是動(dòng)畫光標(biāo)文件的名稱,并且光標(biāo)文件“ dinosaur.ani ”需要與網(wǎng)頁文件放在同一個(gè)目錄下。
小技巧:在制作時(shí)假如網(wǎng)頁是空白的話,那么讀者會(huì)發(fā)現(xiàn)只有將鼠標(biāo)光標(biāo)移動(dòng)到地址欄下方一點(diǎn)的范圍內(nèi)才能夠看到效果。為了能夠在更大范圍內(nèi)看到效果,讀者可以在制作時(shí)輸入其他內(nèi)容或者連續(xù)按【 Enter 】鍵輸入空段落,保證頁面中有足夠多的內(nèi)容,可以方便觀察效果。
( 3 )單擊菜單欄中的【文件】|【保存】命令保存網(wǎng)頁文件,然后在瀏覽器中打開該網(wǎng)頁,將鼠標(biāo)光標(biāo)移上去,此時(shí)即可看到鼠標(biāo)變成一只向前走的恐龍。
至此,本實(shí)例操作完畢。本實(shí)例通過 CSS 來實(shí)現(xiàn)生動(dòng)有趣的鼠標(biāo)效果,通過 CSS 不僅能提高工作效率,還可以實(shí)現(xiàn)很多令人眩目的出色效果,作為一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)師,必須要熟練把握 CSS 的運(yùn)用。
新聞熱點(diǎn)
疑難解答