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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/* 用來觸發預先載入圖片的區域 */
#dynamic_logo::before {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;

/* 將下面有用到的圖片網址寫在這裡以預先載入，避免圖片載入時產生閃爍 */
content:
url('圖片網址')
url('圖片網址')
; /* <- 請不要刪掉這個分號 */
}

#dynamic_logo {
/* 將噗寶位置固定在距離視窗右下角10px處的最上層，並隱藏被推出去的預設噗寶 */
position: top;
top: 360px;
right: 200px;
z-index: 2000;


/* 為整個噗寶加上陰影 */
filter: drop-shadow(3px 3px 7px rgba(0, 0, 0, 0.3));

/* 待機時噗寶圖片寬高 */
width: 292px;
height: 272px;
/* 待機時噗寶圖片網址 */
background: url('圖片網址') no-repeat left/contain;
}

/* 用來顯示游標懸浮時噗寶圖片的區域 */
#dynamic_logo::after {
/* 讓此偽元素能夠顯示在畫面上並設定大小 */
content: '';
display: block;

/* 設定游標懸浮時噗寶圖片寬高與點擊前相同 */
width: 100%;
height: 100%;
/* 游標懸浮時噗寶圖片網址 */
background: url('圖片網址') no-repeat left/contain;

/* 游標懸浮時游標圖片網址 (尺寸必須在 128x128 以內，超過的話會無法顯示) */
cursor: url('圖片網址'), auto;
}

/* 用來顯示點擊後噗寶圖片的區域 */
#creature {
/* 點擊前先隱藏點擊後噗寶圖片 */
display: none;

/* 將預設噗寶圖片推出畫面外 */
padding-left: 100%;

/* 設定點擊後噗寶圖片寬高與點擊前相同 */
width: 100%;
height: 100%;
/* 點擊後噗寶圖片網址 */
background: url('圖片網址') no-repeat left/contain;

/* 點擊後游標圖片網址 (尺寸必須在 128x128 以內，超過的話會無法顯示) */
cursor: url('圖片網址'), auto;
}

/* 游標懸浮時隱藏待機時噗寶圖片 */
#dynamic_logo:hover {
background: none;
}
/* 游標未懸浮時隱藏懸浮時噗寶圖片 */
#dynamic_logo:not(:hover)::after {
background: none;
}