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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | /* ======== 設定區 ======== */ #about_me u:last-child { /*噗寶整體在畫面的左右位置*/ left: 0; /*left可改right*/ /*噗寶整體在畫面的上下位置*/ bottom: 0; /*bottom可改top*/ /*機器圖檔大小為 300 x 300*/ --機器背景: url(https://images.plurk.com/sg4KvZm4Qj5qLvLaHxrpf.png); --機器殼: url(https://images.plurk.com/4mBUnAEVS13YuHIOmjIXxW.png); /*夾子圖檔大小皆為 寬100 x 高80*/ --夾子開: url(https://images.plurk.com/2xshFXKxPIAB0nLDCdQLEO.png); --夾子關: url(https://images.plurk.com/6BTBZBJshCRJjZYvSPrPHH.png); /*娃娃圖檔大小皆為100 x 100*/ --娃娃1被夾: url(https://images.plurk.com/n1VnqqZiMK2P9Ulm2Xw72.png); --娃娃1落下: url(https://images.plurk.com/1Vstjf2Do3yY5a2z8mqMlf.png); --娃娃1碰底: url(https://images.plurk.com/6VzfFSpIMfzWZr1trJg5kd.png); --娃娃1展示: url(https://images.plurk.com/6VzfFSpIMfzWZr1trJg5kd.png); --娃娃2被夾: url(https://images.plurk.com/3vh0850QSbAjaHh0Pev9Tc.png); --娃娃2落下: url(https://images.plurk.com/35yuiwCQKp8PCmP41RcKGf.png); --娃娃2碰底: url(https://images.plurk.com/KpsBqzvqqML9FPgLuL1vk.png); --娃娃2展示: url(https://images.plurk.com/KpsBqzvqqML9FPgLuL1vk.png); --娃娃3被夾: url(https://images.plurk.com/5JTe6j43b8OCJSOwXyMStk.png); --娃娃3落下: url(https://images.plurk.com/5APFdgDHxgwRIr6RoeP8Jm.png); --娃娃3碰底: url(https://images.plurk.com/1T5qpuYb89XCichdk8rIwy.png); --娃娃3展示: url(https://images.plurk.com/1T5qpuYb89XCichdk8rIwy.png); --娃娃4被夾: url(https://images.plurk.com/5DJ53PMjB8H9Y8g4ovcvtX.png); --娃娃4落下: url(https://images.plurk.com/2BbQZttMubKeSTNu7XeJs5.png); --娃娃4碰底: url(https://images.plurk.com/1fUVFioHgMzHtQUAs5XdrV.png); --娃娃4展示: url(https://images.plurk.com/1fUVFioHgMzHtQUAs5XdrV.png); --娃娃5被夾: url(https://images.plurk.com/2Gv81sGToycxBhxHg7MRS2.png); --娃娃5落下: url(https://images.plurk.com/6hZfxtGQXXaGEehBr5L4tV.png); --娃娃5碰底: url(https://images.plurk.com/1UpaW2XL7jKCDMp9fRsQv4.png); --娃娃5展示: url(https://images.plurk.com/1UpaW2XL7jKCDMp9fRsQv4.png); /*圖檔大小為 寬28 x 高20*/ --移動按鈕: url(https://images.plurk.com/41UCdvsO50RGiPnE4jRpcj.png); /*圖檔大小為 寬84 x 高20*/ --抓取圖案: url(https://images.plurk.com/1JTkIrHHkI2Lk61fqkXWaM.png); } /* ======== 主體 ======== */ #about_me u:last-child { position:fixed; z-index: 9000; height: 300px; width: 300px; background: var(--機器背景); } #about_me u:last-child i:nth-last-child(2) { background: var(--機器殼); position:absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; } #about_me u:last-child i:nth-last-child(2):before { content: ""; background-image: url(); display: block; width: 100px; height: 100px; position: absolute; top: 197px; left: 0px; } #about_me u:last-child i { display: block; font-size: 0; line-height: 0; } /* ======== 夾子 ======== */ /*繩子*/ #about_me u:last-child i:last-child { transition:left .6s; position:absolute; top: 17px; left: 0; z-index: -2; width: 100px; height: 0; background: linear-gradient(#000, #000) no-repeat center top / 2px 100%; } /*繩子移動拉長*/ #about_me u:last-child i:is(:nth-child(1), :nth-child(6), :nth-child(11)):hover ~ :last-child { left: 70px; } #about_me u:last-child i:is(:nth-child(2), :nth-child(7), :nth-child(12)):hover ~ :last-child { left: 100px; } #about_me u:last-child i:is(:nth-child(3), :nth-child(8), :nth-child(13)):hover ~ :last-child { left: 130px; } #about_me u:last-child i:is(:nth-child(4), :nth-child(9), :nth-child(14)):hover ~ :last-child { left: 160px; } #about_me u:last-child i:is(:nth-child(5), :nth-child(10), :nth-child(15)):hover ~ :last-child { left: 190px; } #about_me u:last-child i:is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10)):active ~ :last-child { transition: height .6s; height: 80px; } #about_me u:last-child i:is(:nth-child(11), :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15)):hover ~ :last-child { transition: height .6s, left .6s .6s; height: 0; left: 0; } /*夾子*/ #about_me u:last-child i:last-child:before { content: ""; display:block; transition: background 0s 1.2s; position:absolute; top: 100%; left: 0; width: 100px; height: 80px; background: var(--夾子開); } /*夾子開關*/ #about_me u:last-child i:is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10)):active ~ :last-child:before { background: var(--夾子關); } #about_me u:last-child i:is(:nth-child(11), :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15)):hover ~ :last-child:before { background: var(--夾子開); } /* ======== 娃娃 ======== */ #about_me u:last-child i:last-child:after { content: ""; position:absolute; top: calc(100% - 10px); left: 0; width: 100px; height: 0; padding-top: 100px; overflow: hidden; display:block; transform: scale(0); background-repeat: no-repeat; } #about_me u:last-child i:nth-child(6):active ~ :last-child:after { background-image: var(--娃娃1被夾); } #about_me u:last-child i:nth-child(7):active ~ :last-child:after { background-image: var(--娃娃2被夾); } #about_me u:last-child i:nth-child(8):active ~ :last-child:after { background-image: var(--娃娃3被夾); } #about_me u:last-child i:nth-child(9):active ~ :last-child:after { background-image: var(--娃娃4被夾); } #about_me u:last-child i:nth-child(10):active ~ :last-child:after { background-image: var(--娃娃5被夾); } #about_me u:last-child i:is(:nth-child(11), :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15)):hover ~ :last-child:after { transition: background-image 0s 1.2s, margin-top .6s 1.2s, padding 0s 1.8s, height 0s 1.8s, background-position 0s 1.8s, width 0s 2.2s; transform: scale(1); margin-top: 190px; height: 100px; padding-top: 0; background-position: left top 100px; width: 0; } #about_me u:last-child i:nth-child(11):hover ~ :last-child:after { background-image: var(--娃娃1落下); content: var(--娃娃1碰底); } #about_me u:last-child i:nth-child(12):hover ~ :last-child:after { background-image: var(--娃娃2落下); content: var(--娃娃2碰底); } #about_me u:last-child i:nth-child(13):hover ~ :last-child:after { background-image: var(--娃娃3落下); content: var(--娃娃3碰底); } #about_me u:last-child i:nth-child(14):hover ~ :last-child:after { background-image: var(--娃娃4落下); content: var(--娃娃4碰底); } #about_me u:last-child i:nth-child(15):hover ~ :last-child:after { background-image: var(--娃娃5落下); content: var(--娃娃5碰底); } /*落下後展示*/ #about_me u:last-child i:is(:nth-child(11), :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15)):hover ~ :nth-last-child(2):before { transition: background-image 0s 2.2s; } #about_me u:last-child i:nth-child(11):hover ~ :nth-last-child(2):before { background-image: var(--娃娃1展示); } #about_me u:last-child i:nth-child(12):hover ~ :nth-last-child(2):before { background-image: var(--娃娃2展示); } #about_me u:last-child i:nth-child(13):hover ~ :nth-last-child(2):before { background-image: var(--娃娃3展示); } #about_me u:last-child i:nth-child(14):hover ~ :nth-last-child(2):before { background-image: var(--娃娃4展示); } #about_me u:last-child i:nth-child(15):hover ~ :nth-last-child(2):before { background-image: var(--娃娃5展示); } /* ======== 按鈕 ======== */ /*移動按鈕*/ #about_me u:last-child i:nth-child(-n+5) { position:absolute; bottom: 110px; background: var(--移動按鈕); width: 28px; height: 20px; right: 30px; } #about_me u:last-child i:nth-child(4) { margin-right: 28px; } #about_me u:last-child i:nth-child(3) { margin-right: 56px; } #about_me u:last-child i:nth-child(2) { margin-right: 84px; } #about_me u:last-child i:nth-child(1) { margin-right: 112px; } /*抓取按鈕*/ #about_me u:last-child i:is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10)) { position:absolute; bottom: 85px; right: 30px; width: 140px; height: 25px; transform: scale(0); background: var(--抓取圖案); } /*抓取按鈕亮起*/ #about_me u:last-child i:nth-child(1):hover ~ :nth-child(6), #about_me u:last-child i:nth-child(2):hover ~ :nth-child(7), #about_me u:last-child i:nth-child(3):hover ~ :nth-child(8), #about_me u:last-child i:nth-child(4):hover ~ :nth-child(9), #about_me u:last-child i:nth-child(5):hover ~ :nth-child(10) { transition: transform 0s .6s; transform: scale(1); } #about_me u:last-child i:is(:nth-child(n)):hover { transform: scale(1) !important; } /*抓取的動畫*/ #about_me u:last-child i:nth-child(6):active ~ :nth-child(11), #about_me u:last-child i:nth-child(7):active ~ :nth-child(12), #about_me u:last-child i:nth-child(8):active ~ :nth-child(13), #about_me u:last-child i:nth-child(9):active ~ :nth-child(14), #about_me u:last-child i:nth-child(10):active ~ :nth-child(15) { transition: transform 0s 1.2s; transform: scale(1); } #about_me u:last-child i:is(:nth-child(11), :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15)) { transform: scale(0); position:absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Direct link: https://paste.plurk.com/show/ODimh40oHHWa5doBvkys