心情好，心情壞

相信很多部落格都會把誰來我家設定的非常美觀，有興趣來看看吧！

　誰來我家的中英對照：

/*--誰來我家--*/ #visitor {} 

/*--誰來我家的標題--*/ #visitor .box-text{}　若不想顯示標題，可在{}內打上display: none;

/*--誰來我家的內容區塊--*/ #visitor .box-title{ position: absolute; top: 0px; left: 0px; width:0px; height: 0px; }　

/*--誰來我家的頭像--*/ #visitor img{ width: 0px; height: 0px; padding: 1px; border: 1px dashed #; } 

/*--尚未點擊頭像的效果--*/ #visitor a img { filter:blur(opacity=0); }

/*--移動到頭像後的效果--*/ #visitor a:hover img { filter:alpha(opacity=100); position: relative; left: 1px; top: 1px; }






　誰來我家語法使用說明：

紅色部分》這語法為可移動誰來我家的語法，若不想移動，請將此語法刪除。
Top　為設定的高度
Left　為向左移動（或者改Right 向右移動）
width　為誰來我家語法的總寬度（數字越大，此語法就會越往橫向伸長）
height　總高度（數字越大，此語法就會越往直立伸長，請自行判斷）
0px;　px（pixel）為長度單位，請自行設定。


橘色部份》為設定頭像的寬&高。
width 跟 height 設定的 0px 要一致，例如 width: 20px; height: 20px;


綠色部份》這個代碼是幫頭像增加虛線，若不想使用可自行刪除。
padding　為虛線跟頭像的距離
border　為虛線的粗度
dashed　為短直線的代碼，也可以修改其他種類（solid 實線 - double 雙重線 ）
然後在 # 後面 ; 前面填上色碼（這裡提供我覺得還蠻不錯得色碼表）


　線條效果圖片！
 


紫色部份》為點擊前跟點擊後的語法效果。
filter: 後 (opacity=0); 之前，中間為修改的地方


粉色部份》為透明度的深淺。
(opacity=0); 數值越少越透明，最多到100


藍色部份》點擊後會有稍微凹陷的效果，若不想使用可自行刪除。
position: relative; left: 1px; top: 1px; 請自行修改






　誰來我家濾鏡效果：

　以下效果是要修改 filter:alpha(opacity=0); 紅色部份，透明度自行修改。

正常效果　Alpha　
模糊效果　Blur　
黑白效果　Gray　
負片效果　Xray　
對比過度　Invert　
隱藏效果　Mask　（底部會顯示白色）
橫波效果　Wave　
左右相反　FlipH　


　以下效果是要修改 filter:alpha(opacity=0); 紅色部份，請整串換掉。

由右下開始漸層透明效果　alpha(style=1);　
四個角偏橢圓透明效果　alpha(style=2);　
四個角四邊形透明效果　alpha(style=3);　
變形效果　Wave(strength=10,freq=5,lightstrength=10,phase=5);
馬賽克效果　progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3);　
(maxsquare=3) 數值為馬賽克模糊度的大小，請自行調整。


　以下效果是圓形朦朧感效果，要使用請全部修改。

#visitor a img {FILTER: alpha(style=2)}
#visitor a:hover img {FILTER: alpha(style=3)}
 還要在紅色字 #visitor {這} 部份加上以下語法
BACKGROUND-POSITION: center bottom; BACKGROUND-IMAGE: none; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #ffffff;


　以下是濾鏡效果使用範例。

例如我想要點擊前黑白，點擊後馬賽克：
#visitor a img {FILTER: Gray;}
#visitor a:hover img {FILTER: progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3);}

例如我想要點擊前彩色，點擊後負片+凹陷效果：
#visitor a img {FILTER:alpha;}
#visitor a:hover img {FILTER: Xray; position: relative; left: 1px; top: 1px;}


　以下效果圖片用的是"100"不透明！
 




　誰來我家圖片替換效果：

若要使用圖片替換效果，就盡量不要用濾境效果，這樣會變的很雜亂。

首先請在 #visitor img 內的 {width: 0px; height: 0px;} 設定都改為0px;

然後請複製以下語法，自行修改貼上

#visitor .box-text li {float:left;}
#visitor .box-text li a {display:block; width:圖寬px; height:圖高px; border: none; background: url(頭像圖片網址) no-repeat; }
#visitor .box-text li a:hover {background:#點擊後底部的顏色，請輸入色碼;}
#visitor .box-text li a:hover img {display:block; width:圖寬px; 圖高px;}
#visitor .box-more { display: none; }

若你的頭像要預定為20px，圖片的大小就要20公分，寬&高也請設定20px。 






　整理說明：

如果是使用後台介面修改，可利用 Ctrl+F 搜尋 #visitor。
以上的效果同樣也可使用在其他有頭像的地方。
 此篇為格主整理出來的資料，勿隨意複製、轉貼、引用。