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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | /*天數倒數計時器*/ /************************************* 此語法使用footer, 如有用到相關語法會有衝突可能。 語法參考: https://www.plurk.com/p/okzitz https://www.plurk.com/p/opbldb **************************************/ /*日期和php網址自行更改*/ footer { --hundreds: url(' php網址? date=2023-1-13& d=3'); --tens: url(' php網址? date=2023-1-13& d=2'); --ones: url(' php網址? date=2023-1-13& d=1'); --msg: "距離學測還有:"; } /*隱藏語言選單*/ #languge_selector { display: none; } /*背景視窗*/ footer::before { content: ""; background-image: url("https://images.plurk.com/6MAgKevW5kXr9mkQ0RyIRu.png"); width: 360px; height: 200px; position: absolute; background-repeat: no-repeat; } /*固定於右下角*/ footer { position: fixed; width: 360px; height: 200px; bottom: 0px; right: 20px; z-index: 99999; } /*隱藏footer原本的字*/ #footer, #footer a { color: transparent; pointer-events: none; } /*左上角的字*/ #footer::before { content: var(--msg); color: rgba(255, 255, 255, 0.8); top: 30px; left: 10px; position: absolute; font-size: 20px; } #footer::after { content: "天"; color: rgba(255, 255, 255, 0.8); bottom: 60px; right: 55px; position: absolute; font-size: 25px; } /*數字大小*/ #footer li:nth-child(1)::after, #footer li:nth-child(2)::before, #footer li:nth-child(2)::after, #footer ul::before, #footer ul::after, #footer li:nth-child(1)::before { width: 50px; height: 75px; display: block; position: absolute; top: 70px; z-index: 1; } /*百位數離左邊的距離*/ #footer li:nth-child(1)::after { content: var(--hundreds); left: 70px; } /*十位數離左邊的距離*/ #footer li:nth-child(2)::before { content: var(--tens); left: 140px; } /*個位數離左邊的距離*/ #footer li:nth-child(2)::after { content: var(--ones); left: 210px; } |
Direct link: https://paste.plurk.com/show/8gM1VVw2YFjVFslW1fiB