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 | /* ======== 設定區 ======== */ footer { /*噗寶整體在畫面的左右位置*/ right: 0; /*left可改right*/ /*噗寶整體在畫面的上下位置*/ bottom: 0; /*bottom可改top*/ /*機器圖檔大小為 寬200 x 高400*/ --機器背景: url(https://images.plurk.com/4VSMpq8ggwFEVRamy0vxhw.png); --機器殼: url(https://images.plurk.com/5ElE3A35mw9bVDM5LlDEAJ.png); /*夾子圖檔大小皆為 寬70 x 高60*/ --夾子開: url(https://images.plurk.com/48tSOiQMiCasqf48fLxVJa.png); --夾子關: url(https://images.plurk.com/7fG3zrhhrDChtq0m699QBE.png); --夾子線顏色1: #60a1e6; --夾子線顏色2: #60a1e6; /*娃娃圖檔大小皆為70 x 70*/ --娃娃1被夾: url(https://images.plurk.com/1fGygoXauoeIka1OgYg1yA.png); --娃娃1落下: url(https://images.plurk.com/1IlI5BzhoWunROrfl3QFIH.png ); --娃娃1展示: url(https://images.plurk.com/4qlOIUxzgYyDnP5ueu5CJ0.png); --娃娃2被夾: url(https://images.plurk.com/6kbzBnYb10TbTQ2DCxElP.png); --娃娃2落下: url(https://images.plurk.com/36ds67ttq1wwss6FXmig4b.png); --娃娃2展示: url(https://images.plurk.com/67wpKBmoqAQjF3ZETKHKnz.png); --娃娃3被夾: url(https://images.plurk.com/5kS7f7ZBoKlaE2NYpdjEXG.png); --娃娃3落下: url( https://images.plurk.com/3LkRLNpEC0KZnIMGARLyKX.png); --娃娃3展示: url(https://images.plurk.com/7AX6bOusuW3hCpjEZzptPt.png); /*圖檔大小為 寬28 x 高20*/ --移動按鈕: url(https://images.plurk.com/5fC0zHhhEFffx157TROap6.png); /*圖檔大小為 寬84 x 高20*/ --抓取圖案: url(https://images.plurk.com/2KJMkRNkiRy3R8i2zaSxUp.png); } /* ======== 主體 ======== */ footer { position:fixed; z-index: 9000; height: 400px; width: 200px; } #footer { all:unset; } #footer, #footer ul { display: block; height: 100%; width: 100%; } #footer a { display: none; } #footer ul li { margin: 0; font-size: 0; line-height: 0; display: block; } #footer ul { background: var(--機器背景); position:relative; z-index: 0; } #footer ul li:nth-last-child(2) { content: var(--機器殼); position:absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; } /* ======== 夾子 ======== */ /*繩子*/ #footer ul li:last-child { transition:left .6s, height .6s; position:absolute; top: 61px; left: 17px; z-index: -2; width: 70px; height: 0; background: linear-gradient(to top, var(--夾子線顏色2), var(--夾子線顏色1)) no-repeat center top / 2px 100%; } /*繩子移動拉長*/ #footer ul li:is(:nth-child(1), :nth-child(4), :nth-child(7)):hover ~ :last-child { left: 60px; } #footer ul li:is(:nth-child(2), :nth-child(5), :nth-child(8)):hover ~ :last-child { left: 85px; } #footer ul li:is(:nth-child(3), :nth-child(6), :nth-child(9)):hover ~ :last-child { left: 110px; } #footer ul li:is(:nth-child(4), :nth-child(5), :nth-child(6)):active ~ :last-child { transition: height .6s; height: 50px; } #footer ul li:is(:nth-child(7), :nth-child(8), :nth-child(9)):hover ~ :last-child { transition: height .6s, left .6s .6s; height: 0; left: 17px; } /*夾子*/ #footer ul li:last-child:before { content: ""; display:block; transition: background 0s 1.2s; position:absolute; top: 100%; left: 0; width: 70px; height: 60px; background: var(--夾子開); } /*夾子開關*/ #footer ul li:is(:nth-child(4), :nth-child(5), :nth-child(6)):active ~ :last-child:before { background: var(--夾子關); } #footer ul li:is(:nth-child(7), :nth-child(8), :nth-child(9)):hover ~ :last-child:before { background: var(--夾子開); } /* ======== 娃娃 ======== */ #footer ul li:last-child:after { content: ""; position:absolute; top: calc(100% - 1px); left: 0; width: 70px; height: 0; padding-top: 70px; overflow: hidden; display:block; transform: scale(0); background-repeat: no-repeat; } #footer ul li:nth-child(4):active ~ :last-child:after { background-image: var(--娃娃1被夾); } #footer ul li:nth-child(5):active ~ :last-child:after { background-image: var(--娃娃2被夾); } #footer ul li:nth-child(6):active ~ :last-child:after { background-image: var(--娃娃3被夾); } #footer ul li:is(:nth-child(7), :nth-child(8), :nth-child(9)):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; transform: scale(1); margin-top: 238px; height: 70px; padding-top: 0; background-position: left top 70px; } #footer ul li:nth-child(7):hover ~ :last-child:after { background-image: var(--娃娃1落下); content: var(--娃娃1展示); } #footer ul li:nth-child(8):hover ~ :last-child:after { background-image: var(--娃娃2落下); content: var(--娃娃2展示); } #footer ul li:nth-child(9):hover ~ :last-child:after { background-image: var(--娃娃3落下); content: var(--娃娃3展示); } /* ======== 按鈕 ======== */ /*移動按鈕*/ #footer ul li:nth-child(-n+3) { position:absolute; bottom: 183px; background: var(--移動按鈕); width: 28px; height: 20px; right: 63px; } #footer ul li:nth-child(2) { margin-right: 28px; } #footer ul li:nth-child(1) { margin-right: 56px; } /*抓取按鈕*/ #footer ul li:is(:nth-child(4), :nth-child(5), :nth-child(6)) { position:absolute; bottom: 158px; right: 63px; width: 84px; height: 25px; transform: scale(0); background: var(--抓取圖案); } /*抓取按鈕亮起*/ #footer ul li:nth-child(1):hover ~ :nth-child(4), #footer ul li:nth-child(2):hover ~ :nth-child(5), #footer ul li:nth-child(3):hover ~ :nth-child(6) { transition: transform 0s .6s; transform: scale(1); } #footer ul li:is(:nth-child(n)):hover { transform: scale(1); } /*抓取的動畫*/ #footer ul li:nth-child(4):active ~ :nth-child(7), #footer ul li:nth-child(5):active ~ :nth-child(8), #footer ul li:nth-child(6):active ~ :nth-child(9) { transition: transform 0s 1.2s; transform: scale(1); } #footer li:is(:nth-child(7), :nth-child(8), :nth-child(9)) { transform: scale(0); position:absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Direct link: https://paste.plurk.com/show/JeWX7qoy150EGybTbiNw