CSS網頁制作動態效果二則

2024-03-25 分類：網站建設

鼠標變換

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

<html>

<head>

<title>cursor</title>

</head>

<body>

手形

移動標志

等待狀態

定位指示

尋求幫助

</body>

</html>

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

陰影效果

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

<html>

<head>

<title>shadow</title>

<style type=text/css>



</style>

</head>

<body>

陰影效果

</body>

</html>

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

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

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

分享名稱：CSS網頁制作動態效果二則
文章源于：http://m.kartarina.com/news25/321775.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、品牌網站制作、網站收錄、標簽優化、小程序開發、微信小程序

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

猜你還喜歡下面的內容