阿斗
噗浪佈景 投餵噗寶 互動噗寶
這次做了偵探的甜甜圈盒,可到我的頁面看效果
https://images.plurk.com/3eKjlxKGtI3l1WrUe3dmBx.gif
如之前說好的給偵探買了吃不完的甜甜圈了
https://images.plurk.com/6TUPCWNlXNU3RBPsj4cnIh.png
自由取用歡迎 可自行替換圖片
/* 偵探的甜甜圈投餵噗寶 */ (Plurk Paste)
(7/24更新) 感謝熱心噗友提供修改語法

修改前語法、說明下收
阿斗
https://images.plurk.com/3iUnLVnF8EjN01YQIJlcvs.gif
一開始用的測試圖片,是想做成貓咪存錢筒的感覺
所以我也叫它給你錢噗寶(直白
十分推薦給想塞錢、餵食自推的各位同好們 (??
基本上就是用hover切換三張圖片,不過這裡再模擬了一個點擊換圖片的效果

修改前原語法:
/* 偵探的甜甜圈投餵噗寶 */ (Plurk Paste)
7/24已更新語法在噗首,使用噗首的語法即可
阿斗
建議想用此語法的人先將原佈景裡有調整過#dynamic_logo和#creature的語法都先刪除,不然效果可能會衝突無法順利出現
阿牛🐮
天啊也太口愛ㄌㄅ!!!
阿斗
語法內使用到的圖片一覽
待機、移上去、點擊
https://images.plurk.com/2FLhMuNUGLfG52JDu0QN8F.gif https://images.plurk.com/13uv53CwkswVSGic6cHkzM.gif https://images.plurk.com/TPy9hMCI1A3fbwDJL39nU.gif
游標
https://images.plurk.com/45yHDqEtEfVoJvPR5pmFJ7.png https://images.plurk.com/686x3vhW3AR6sxP6tnJDVr.png
想替換圖片的噗友可以先準備好這幾種圖片,當然游標可以一個就好或根本不要
阿斗
因為噗浪不能寫keyframes,作為替代方案一開始先準備好了只會播放一次的gif
結果發現不靠js的話播放完就無法重新加載=行不通
只好妥協改做循環了........ 不然就可以設定點擊後只跑一次了 (應該
或是有人知道更好的解決方法的話希望可以跟我說
Nao@現實忙碌
阿斗太神啦 !!!
來ㄛ٩( メ∀・)۶🐉⚔️雞丁
您值得一輩子的諾貝爾謝林獎 & 您真的成為了語法大師
欸ㄟ∠( ᐛ 」∠)_🦽03
天阿 太可愛了啦
阿斗
阿牛🐮 : 謝謝V姐我也覺得很口愛!!!! (自畫自讚
阿斗
Nao@現實忙碌 : 謝謝阿直 我真的是瘋了還畫動圖
藤堂優
我的天 是神明大人
謝謝謝謝謝謝謝謝
卡羅卡羅🍕SCP-458
能想到這樣使用滑鼠事件太神啦
阿斗
來ㄛ٩( メ∀・)۶🐉⚔️雞丁 : 優秀的被疑者太多了,為了成為諾貝爾謝林獎的得主我也是不遺餘力 但我想要的都有了應該不會再做了(
星恬
好可愛!!!
阿斗
欸ㄟ∠( ᐛ 」∠)_🦽03 : 偵探太過可愛畫到我都想買個1000盒 ……!!&謝謝噗幣 !!
阿斗
藤堂優 : 我、我不是,我只是普通ㄉ被疑者
阿斗
卡羅卡羅🍕SCP-458 : 尤其是在有限的框架裡弄真的好燒腦(還只能純css)最後有一個跟一開始構想類似的成果出來太好啦 ……!
阿斗
星恬 : 謝謝!!
阿斗
雖然現在放有點晚了來放一下可愛的甜甜圈小偷謝林 (??
【彩虹社中文字幕】謝林偵探的甜甜圈事件
核美拉
不好意思想要詢問一下此語法會覆蓋原本的噗寶嗎?><
還是說是可以追加上去的呢?

抱歉看了說明之後我找到答案了(爆)謝謝噗主分享超可愛語法!!
阿斗
核美拉 : 因為我是在#dynamic_logo和#creature裡寫的,如果你是在那裡設定噗寶圖片的話就會影響到(所以一開始才會寫要先刪除掉有調整過的語法)
要保留原本噗寶的解決方法只有利用偽元素把原來的噗寶放到其他位置(例如我的頁面左下
Shaii×蝶朱
天啊這個真的太可愛了!!阿斗太強了...
阿斗
Shaii×蝶朱 : 謝謝蝶朱…!好像在養自推真的很讚……
AKU🧐被疑者快樂墓
謝謝你
真的太可愛了...
偵探過於可愛我一直在阿斗的頁面給他餵甜甜圈...
漓彩☀學習是種樂趣
超口愛,謝謝阿斗分享
千穗
這個語法實在是太棒了 感嘆作者讚美作者
阿麥
可以委託嗎 這個超讚
阿斗
AKU🧐被疑者快樂墓 : 謝謝AKU!!AKU的頁面有好多偵探,看到可以順利換上很開心
阿斗
Yureya: 千穗 : 謝謝…!期待大家的各種玩法
阿斗
阿麥 : 動圖對我來說太難畫了不會開委託但是謝謝!!
☆.:*✧:+。.:*✧ 𝜗ৎ
這個真的太厲害了
茶樹_重新啟動
好可愛真的好可愛!!太厲害了
藻(Shimii)
謝謝大大!!!!! 自己做得很開心
阿斗
https://images.plurk.com/4rV4O1VgMdobpy8E1j3omY.jpg
不好意思突然大爆睡了一番,來回答一下噗幣小天使的問題
可以針對點下左鍵的時候(active)去做游標更換
最後加上這段就可以了

img#creature:active{
cursor:url(游標圖片網址), auto;
}
阿斗
藻(Shimii)
不好意思打擾了
想請教一下,在製作時游標的圖檔用png的話不會順利出現(後來改用gif檔就成功了),目前沒有使用這個以外的語法,請問是因為圖片的大小有限制嗎
阿斗
藻(Shimii) : 對,尺寸限制在128*128內,超過尺寸會忽視,我把這個加進語法註解好了
藻(Shimii)
原來如此!!非常感謝
不好意思讓你費心做防呆註解
阿斗
藻(Shimii) : 更新上去了!
不會不會這樣子寫才更完善,也謝謝你提出
櫻澤樂★鈴連大好き
感謝 提供這麼可愛的語法~附了自己畫的成品 >< https://images.plurk.com/2JqwS0ssmdHibJzLlBfzWP.gif
阿斗
櫻澤樂★鈴連大好き : 謝謝你分享可愛的成品 !!
給你筆,請自耕
謝謝大大分享語法!!這幾天就來試試看!
娜喵ฅ^•ﻌ•^ฅ
真的太可愛了 謝謝分享!!
阿斗
給你筆,請自耕 : 娜喵ฅ^•ﻌ•^ฅ : 不會不會期待看到可愛的成品
星明り・7258
想問一下不直接替代 background 的 url 而是切換成顯示 :after 有什麼特別的原因嗎
阿斗
星明り・7258 : 原本也是想直接替代dynamic_logo的url,不過這樣做的時候點下去發現會同時存在dynamic_logo和img#creature兩張圖,就決定加一個:after讓他點下去的時候會被img#creature擠到下面去,最後再用overflow: hidden;隱藏起來
星明り・7258
阿斗 : 了解:-)
剛剛試著修改了一下,這個版本修正了點擊後游標不會馬上切換的問題
還有長寬和相同的圖片網址也只需要填一次,可以試用看看
偵探的甜甜圈投餵噗寶 v2 - Pastebin.com
阿斗
星明り・7258 : 唔喔喔……!真的耶而且縮短好多喔還沒有after好棒 謝謝大師……!! 好酷喔學到怎麼寫會比較好了,請問我可以把這個放到噗首嗎……!
星明り・7258
阿斗 : OK的,請隨意使用!!
用 padding 把圖片推走的技巧也好酷
也謝謝噗主的噗幣!
阿斗
星明り・7258 : 已更改了再次感謝
核美拉
不好意思打擾了!
這邊使用了更新後的版本,發生點擊後,會和點擊前圖片一起顯示的問題,請問這點有辦法修正嗎?><
核美拉
https://images.plurk.com/5y7WbDt5BBbt39NqfDT7nP.gif https://images.plurk.com/1h0YbE9iCTbf7IKyArp6Rv.gif

放上更新前後的差異,我想可能是我使用透明背景的緣故,但不知道有沒有辦法點擊後隱藏……
星明り・7258
核美拉 : BUG 警報
感謝回報,我等等修一下,因為原版的點擊前圖片比較小所以看不太出來圖片沒有隱藏
阿斗
星明り・7258 : 核美拉 : 啊...這好像就是我上面說的會一起顯示的問題,因為我正式用的圖變化太小了我昨天也沒注意到XDDDD我先暫時換回原本的語法,也謝謝找出問題和幫忙修正的噗友
星明り・7258
阿斗 : 我把它改成原本的方法了又整理了一下,css 上下左右推來推去好可怕
核美拉 : 請再試試看這個版本!
/* 偵探的甜甜圈投餵噗寶 */ (Plurk Paste)
阿斗
星明り・7258 : 用火狐的話點第一下好像還是不會馬上切換成第二個游標,但是再多點幾下都能順利切換這點還是很棒
是把:after的display: none;改成background: none;就能有這樣的差別嗎好神奇
星明り・7258
阿斗 : 我猜是你的 cursor 只有套在 creature:hover 上,而按下去的時候因為沒有移動滑鼠所以沒有觸發到 hover,所以我把 cursor 也套在 dynamic_logo:active creature 上了
第一下不會馬上切換可能是圖片還沒載入的關係
阿斗
星明り・7258 : 原來嗎,想說既然已經在img上了乾脆就只套hover好了 ((
感謝解惑
星明り・7258
阿斗 : 我又更新了一個版本,應該解決了第一下不會馬上切換的問題 :-)
阿斗
星明り・7258 : 謝謝你特地再更新一個用before預先載入的版本……!已換上網址了
星明り・7258
阿斗 :
喔對了可以幫我把我的名子從噗首拿下來嗎,想要低調一點XD
阿斗
星明り・7258 : 當然可以XDD
核美拉
更新到最新版本之後沒有問題了!!!非常謝謝兩位!!!!!
辣炒花椰🥕亂摸摸
您好,
不好意思,想請問點擊後無法出現點擊後的噗寶及游標,不知道是哪個地方有問題,不知道是不是有解決方法?
阿斗
辣炒花椰🥕亂摸摸 : 方便的話可以把語法丟上來看看嗎,或是丟在私噗也可以><
辣炒花椰🥕亂摸摸
我的語法不好意思,要麻煩您了
阿斗
辣炒花椰🥕亂摸摸 : 少了最後的大括號喔
https://images.plurk.com/2NwGosknGaC47ga2W14R28.png
阿斗
阿不是分號是大括號我打錯(rofl)(已編輯
辣炒花椰🥕亂摸摸
阿斗 : 啊!真的!!!謝謝!!!沒注意到這個地方,謝謝您
Rachel代購🐱交易
想問阿斗大神只能固定於右下角嗎
阿斗
Rachel代購🐱交易 :
https://images.plurk.com/6MRk5QvbrnxihhJ7gQa0ph.png
修改這裡就可以了
右下=bottom、right
左上=top、left
以此類推代入~
Rachel代購🐱交易
阿斗 : 謝謝阿斗大神(土下座
阿斗
nminoru: 我用別的帳號測試了語法本身沒有問題,可能是跟您之前的語法有衝突,建議先 Ctrl+F 找出之前佈景裡把有改到 dynamic_logocreature 相關的語法都刪掉再試試
阿斗
nminoru: 不好意思,我晚一點回您,只是因為私人設備問題我不方便幫您改語法,只能文字敘述回答而已,投幣就不用了謝謝><
阿斗
nminoru:
1. 只要您有改過#dynamic_logo這個區塊就會和互動噗寶有衝突,之前有回答過您,但是可能因為您沒有CSS基礎所以會比較難理解,我也不太會說明抱歉
2. 翻頁噗寶的PHP作用只是讓圖片隨機出現而已,還是會有跟CSS衝突的可能,原因同上
阿斗
倉鼠🐹 : 不好意思現在才有時間開電腦看才發現您已經把留言刪掉了 如果已經解決的話就好
倉鼠🐹
阿斗 : 是的我後來反覆確認後是跟我的趴趴回應數語法衝到,刪除那段語法就正常了!!
不好意思驚擾您
阿斗
倉鼠🐹 : 沒事的,不過正常來說應該是可以同時存在的,可能語法不完整導致有錯誤
載入新的回覆