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

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

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

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

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

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