CSS網(wǎng)頁制作動態(tài)效果二則

2024-03-25    分類： 網(wǎng)站建設

鼠標變換

想不想在主頁上實現(xiàn)這樣的效果呢？鼠標移到“站點幫助”等字樣上時，形狀就變成求助的樣子，當移到可能需要較長時間等待的超鏈接時，鼠標形狀就變成等待的樣子。你要是不信的話，就先將下面這段代碼拷到一個文本編輯器中，存成網(wǎng)頁文件，然后我再給你解釋代碼的含義。

<html>

<head>

<title>cursor</title>

</head>

<body>

<p style=cursor:hand>手形</p>

<p style=cursor:move>移動標志</p>

<p style=cursor:wait>等待狀態(tài)</p>

<p style=cursor:crosshair>定位指示</p>

<p style=cursor:help>尋求幫助</p>

</body>

</html>

這段代碼很簡單，只用到了CSS中的“cursor”屬性，利用“style=cursor:值”這樣的語句形式分別設置它的值就可以了。例如：值為“hand”時，當鼠標移到相應的文字或圖片上時，就會變成超鏈接的手形；值為“move”時，當鼠標移到相應的文字或圖片上時，就會變成上下左右?guī)Х较蚣^的形狀，鼠標的其他形狀及“cursor”值。

陰影效果

這個帶陰影的文字，它不是插入的圖形，而是用“層疊式樣式表單——CSS”用幾行代碼寫出來的，這比插入圖片可省空間多了。這個頁面的源代碼是這樣的：

<html>

<head>

<title>shadow</title>

<style type=text/css>

<!--

p {position:absolute;

top:130;

left:50;

filter:DropShadow(Color=pink,OffX=4,OffY=4,positive=1);}

-->

</style>

</head>

<body>

<p style=font-size:48;font-weight:bold;color:red;>陰影效果</p>

</body>

</html>

這個效果用到了CSS濾鏡中的“DropShadow”屬性，代碼是：{ filter:DropShadow(Color=pink,OffX=4,OffY=4,positive=1)}，其中，“color”參數(shù)表示的是陰影的顏色，“OffX”和“OffY”表示的是陰影在X方向和Y方向上的偏移量，“positive”參數(shù)可以取值為“0”或“1”，取值為“0”時，表示為透明像素設置陰影，為“1”時，表示為不透明像素設置陰影。

使用“DropShadow”屬性時，要特別注意的是，“position”屬性的值一定要是“absolute”，否則陰影不能判斷偏移的方向。為圖形添加陰影的代碼與為文字設置陰影的代碼完全相同。

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

分享名稱：CSS網(wǎng)頁制作動態(tài)效果二則
文章源于：http://bm7419.com/news25/321775.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、品牌網(wǎng)站制作、網(wǎng)站收錄、標簽優(yōu)化、小程序開發(fā)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務器托管