1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
這是修改版
原版網址：https://www.plurk.com/p/oh1etq

/*互動噗寶：本體*/
#dynamic_logo {
	/*這裡勿動*/ margin:0; overflow:hidden;
	/*這裡勿動*/ background:no-repeat center / contain;

	/*圖層*/ z-index:600; /*數字越高在越前面，600是河道預設的圖層位置*/
	/*位置基準點*/ position:absolute; /*absolute不跟頁面走，fixed跟頁面走*/
	/*噗寶高度*/ height:90px;
	/*噗寶寬度*/ width:90px;
	/*上下位置*/ top:0; /*可換bottom*/
	/*上下位置*/ right:0; /*可換left*/
	/*陰影*/ filter: drop-shadow(3px 3px 7px #0004);

	/*－－－－－－↓待機圖↓－－－－－－*/
	/*圖片*/ background-image:url(圖片網址);
	/*游標*/ cursor:url(圖片網址), auto;
}

/*互動噗寶：滑鼠指上時的圖*/
#dynamic_logo:after {
	/*這裡勿動*/ content:""; background:no-repeat center / contain;
	/*這裡勿動*/ height:0; display:block; width:100%;
	/*圖片*/ background-image:url(圖片網址);
}

/*互動噗寶：滑鼠按下時的圖*/
#dynamic_logo img {
	/*這裡勿動*/ object-fit:contain; height:0; display:block; width:100%;
	/*圖片*/ content:url(圖片網址);
	/*游標*/ cursor:url(圖片網址), auto;
}

/*互動噗寶：動作設定*/
/*消除待機圖*/ #dynamic_logo:hover { background:none; }
/*顯示懸浮圖*/ #dynamic_logo:hover:after { height:100%; }
/*顯示點擊圖*/ #dynamic_logo:active img, #dynamic_logo img:hover { height:100%; }

/*這行說明可刪：因為不使用display:none，所以不需要預先載入，唯一需要的是img的cursor，但因為游標不能是動圖且游標不會太大，所以捨棄預先載入這張*/