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 | /* 偵探的甜甜圈投餵噗寶 */ /* 建議先ctrl+F找出前佈景裡把有用到#dynamic_logo和#creature相關的語法都刪掉 */ /* 待機圖片 */ #dynamic_logo{ width:300px; /* 圖片寬度 */ height:300px; /* 圖片高度 */ background:url(https://images.plurk.com/2FLhMuNUGLfG52JDu0QN8F.gif) no-repeat; /* 圖片網址 */ cursor:url(https://images.plurk.com/686x3vhW3AR6sxP6tnJDVr.png), auto; /* 游標圖片,尺寸限制128x128內,超過尺寸不會顯示 */ filter: drop-shadow(3px 3px 7px rgba(0, 0, 0, 0.3)); /* 陰影 */ overflow: hidden; z-index:1000; background-size:contain; position: fixed; /* 固定位置在視窗右下 */ bottom: 10px; right: 10px; } /* 滑鼠移上來換圖片 */ #dynamic_logo::after{ content:""; background:url(https://images.plurk.com/13uv53CwkswVSGic6cHkzM.gif) no-repeat; /* 圖片網址 */ width:300px; /* 圖片寬度 */ height:300px; /* 圖片高度 */ display:none; background-size:contain; } #dynamic_logo:hover{ background:url(); } #dynamic_logo:hover::after{ display:block; } /* 滑鼠點擊換圖片 */ /* 以下兩個圖片網址需相同 */ img#creature{ width:300px; /* 圖片寬度 */ height:300px; /* 圖片高度 */ display:none; } #dynamic_logo:active>img#creature{ display:block; background:url(https://images.plurk.com/TPy9hMCI1A3fbwDJL39nU.gif) no-repeat; /* 圖片網址 */ padding-right:300px; /* 需同圖片寬度 */ background-size:contain; } img#creature:hover{ display:block; background:url(https://images.plurk.com/TPy9hMCI1A3fbwDJL39nU.gif) no-repeat; /* 圖片網址同上 */ padding-right:300px; /* 需同圖片寬度 */ cursor:url(https://images.plurk.com/45yHDqEtEfVoJvPR5pmFJ7.png), auto; /* 點擊後游標圖片,尺寸限制128x128內,超過尺寸不會顯示 */ background-size:contain; } |
Direct link: https://paste.plurk.com/show/Kk1KAFCG00zNuuLhHsoy