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://i.imgur.com/feW0Pan.png);
--機器殼: url(https://i.imgur.com/6EniRwP.png);

/*夾子圖檔大小皆為 寬70 x 高60*/
--夾子開: url(https://i.imgur.com/q9gSGPw.png);
--夾子關: url(https://i.imgur.com/282EK2d.png);
--夾子線顏色1: #571d55;
--夾子線顏色2: #571d55;

/*娃娃圖檔大小皆為70 x 70*/
--娃娃1被夾: url(https://i.imgur.com/s88dVwd.png);
--娃娃1落下: url(https://i.imgur.com/0cnbzjD.png);
--娃娃1展示: url(https://i.imgur.com/S50xyI0.png);

--娃娃2被夾: url(https://i.imgur.com/KVa1fyQ.png);
--娃娃2落下: url(https://i.imgur.com/OTILZtH.png);
--娃娃2展示: url(https://i.imgur.com/YILEUYn.png);

--娃娃3被夾: url(https://i.imgur.com/gs7tWHe.png);
--娃娃3落下: url(https://i.imgur.com/DyqyivR.png);
--娃娃3展示: url(https://i.imgur.com/pgubmva.png);

/*圖檔大小為 寬28 x 高20*/
--移動按鈕: url(https://i.imgur.com/G9l5x6Z.png);

/*圖檔大小為 寬84 x 高20*/
--抓取圖案: url(https://i.imgur.com/ngz3Npn.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: 50px; 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: 70px;
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: 168px;
background: var(--移動按鈕);
width: 50px; height: 30px; right: 33px;
}
#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: 148px; right: 47px;
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%; }