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
76
77
78
79
80
81
82
83
84
85
/* 偵探的甜甜圈投餵噗寶 */
/* 建議先 Ctrl+F 找出目前佈景裡把有用到 #dynamic_logo 和 #creature 相關的語法都刪掉 */

/* 用來觸發預先載入圖片的區域 */
#dynamic_logo::before {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;

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

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

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

/* 待機時噗寶圖片寬高 */
width: 400px;
height: 358px;
/* 待機時噗寶圖片網址 */
background: url('https://i.imgur.com/PzfdsGs.gif') no-repeat left/contain;
}

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

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

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

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

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

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

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

/* 游標懸浮時隱藏待機時噗寶圖片 */
#dynamic_logo:hover {
background: none;
}
/* 游標未懸浮時隱藏懸浮時噗寶圖片 */
#dynamic_logo:not(:hover)::after {
background: none;
}
/* 點擊後顯示點擊後噗寶圖片，同時將懸浮時噗寶圖片推出畫面 */
#dynamic_logo:active #creature, #creature:hover {
display: block;
}