偵探的甜甜圈投餵噗寶 v2

/* 偵探的甜甜圈投餵噗寶 */
/* 建議先 Ctrl+F 找出目前佈景裡把有用到 #dynamic_logo 和 #creature 相關的語法都刪掉 */

#dynamic_logo {
  /* 噗寶圖片寬度 */
  width: 300px;
  /* 噗寶圖片高度 */
  height: 300px;

  /* 將噗寶位置固定在視窗右下角最上層 */
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 1000;

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

  /* 待機時噗寶圖片網址 */
  background: url(https://images.plurk.com/2FLhMuNUGLfG52JDu0QN8F.gif) no-repeat center/contain;

  /* 點擊前游標圖片網址 (尺寸限制在 128x128 內，超過尺寸不會顯示) */
  cursor: url(https://images.plurk.com/686x3vhW3AR6sxP6tnJDVr.png), auto;
}

/* 游標懸浮時噗寶圖片網址 */
#dynamic_logo:hover {
  background: url(https://images.plurk.com/13uv53CwkswVSGic6cHkzM.gif) no-repeat center/contain;
}

/* 點擊後切換為點擊後噗寶圖片 */
#dynamic_logo:active #creature {
  display: block;
}

#creature {
  /* 設定點擊後噗寶圖片長寬與點擊前相同 */
  width: 100%;
  height: 100%;

  /* 隱藏預設噗寶圖片 */
  padding-right: 100%;
  overflow: hidden;

  /* 點擊後噗寶圖片網址 */
  background: url(https://images.plurk.com/TPy9hMCI1A3fbwDJL39nU.gif) no-repeat center/contain;

  /* 點擊後游標圖片網址 (尺寸限制在 128x128 內，超過尺寸不會顯示) */
  cursor: url(https://images.plurk.com/45yHDqEtEfVoJvPR5pmFJ7.png), auto;
}

/* 游標移開時切換為點擊前噗寶圖片 */
#creature:not(:hover) {
  display: none;
}