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://images.plurk.com/2FLhMuNUGLfG52JDu0QN8F.gif')
    url('https://images.plurk.com/13uv53CwkswVSGic6cHkzM.gif')
    url('https://images.plurk.com/TPy9hMCI1A3fbwDJL39nU.gif')
    url('https://images.plurk.com/686x3vhW3AR6sxP6tnJDVr.png')
    url('https://images.plurk.com/45yHDqEtEfVoJvPR5pmFJ7.png')
  ; /* <- 請不要刪掉這個分號 */
}

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

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

  /* 待機時噗寶圖片寬高 */
  width: 300px;
  height: 300px;
  /* 待機時噗寶圖片網址 */
  background: url('https://images.plurk.com/2FLhMuNUGLfG52JDu0QN8F.gif') no-repeat left/contain;
}

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

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

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

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

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

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

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

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