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 | /*噗首按鈕排圈圈 向下開啟+順序顛倒版本*/ .timeline-cnt .plurk .manager { /*這些不動*/ display:block; width:24px; height:24px; /*這些不動*/ margin-right:42px; position:relative; padding:0px /*☆調整圓形大小後若按鈕間有縫隙,無法順著圓形點選,請把這調大→*/80px 0px 0px; /*噗底下留距離*/ margin-top:5px; } .manager a, .manager a:hover { /*這些不動*/ position:absolute; bottom:12px; /*☆調整圓形大小後位置偏掉可在這裡調整→*/right:-10px; width:100%; padding:0; margin:0; /*這些不動*/ text-align:center; transform:rotate(-270deg); background:none!important; /*這些不動*/ transform-origin:center bottom; transition:transform .6s, height .6s; /*☆圓形多大*/ height:70px; } .manager a:hover { color:#888!important; } .manager span { display:none; position:absolute; top:-16px; left:-3px; width:23px; text-align:center; } .display .manager span { display:block; } /*這些不動*/ .display .manager a:nth-last-child(6) { transform:rotate(-270deg); } .display .manager a:nth-last-child(5) { transform:rotate(-236deg); } .display .manager a:nth-last-child(4) { transform:rotate(-198deg); } .display .manager a:nth-last-child(3) { transform:rotate(-162deg); } .display .manager a:nth-last-child(2) { transform:rotate(-124deg); } .display .manager a:nth-last-child(1) { transform:rotate(-90deg); } .manager a:nth-last-child(6):before, .manager a:nth-last-child(6) span { transform:rotate(-90deg); } .manager a:nth-last-child(5):before, .manager a:nth-last-child(5) span { transform:rotate(-124deg); } .manager a:nth-last-child(4):before, .manager a:nth-last-child(4) span { transform:rotate(-162deg); } .manager a:nth-last-child(3):before, .manager a:nth-last-child(3) span { transform:rotate(-198deg); } .manager a:nth-last-child(2):before, .manager a:nth-last-child(2) span { transform:rotate(-236deg); } .manager a:nth-last-child(1):before, .manager a:nth-last-child(1) span { transform:rotate(-270deg); } /*噗首按鈕換圖示*/ /*編輯*/ .manager .pif-edit:before { content:url(圖片網址); } /*消音*/ .manager .pif-volume:before { content:url(圖片網址); } /*轉噗*/ .manager .pif-replurk:before { content:url(圖片網址); } /*喜歡*/ .manager .pif-like:before { content:url(圖片網址); } /*書籤*/ .manager .pif-star:before { content:url(圖片網址); } /*投幣*/ .manager .pif-bone:before { content:url(圖片網址); } /*其他*/ .manager .pif-option:before { content:url(圖片網址); } |
Direct link: https://paste.plurk.com/show/P424hhzuRXlJIGED2Fjw