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
西卡噗寶語法
/* 用來觸發預先載入圖片的區域 */
#dynamic_logo::before {
position: fixed;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;

/* 預載入所有圖片，避免圖片載入時閃爍 */
content:
url('https://images.plurk.com/sI9qWXWZqtPU771eWbudU.png')
url('https://images.plurk.com/7KoGJ3zjutXqIv2tU2j04I.png')
url('https://images.plurk.com/FSTs1DnEt4O1Zh12RNehJ.png');
}

#dynamic_logo {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 400;
width: 300px;
height: 300px;
background: url('https://images.plurk.com/sI9qWXWZqtPU771eWbudU.png') no-repeat center/contain;
filter: drop-shadow(3px 3px 7px rgba(0, 0, 0, 0.3));
}

/* 當游標懸浮在圖片上時，切換到第二張圖片 */
#dynamic_logo:hover {
background: url('https://images.plurk.com/7KoGJ3zjutXqIv2tU2j04I.png') no-repeat center/contain;
}

/* 當點擊圖片時，切換到第三張圖片 */
#dynamic_logo:active {
background: url('https://images.plurk.com/FSTs1DnEt4O1Zh12RNehJ.png') no-repeat center/contain;
}