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
/* ======== 設定區 ======== */

footer {
/*噗寶整體在畫面的左右位置*/ right: 0; /*left可改right*/
/*噗寶整體在畫面的上下位置*/ bottom: 0; /*bottom可改top*/

/*機器圖檔大小為 300 x 300*/
--機器背景: url(https://images.plurk.com/6Yo1FwRJdOKKcvPYUmUoTh.png);
--機器殼: url(https://images.plurk.com/ISsk8GExLpboapcS9CGOn.png);

/*夾子圖檔大小皆為 寬100 x 高80*/
--夾子開: url(https://images.plurk.com/6Z60tKWSTt7iVRiEKmXkTK.png);
--夾子關: url(https://images.plurk.com/2RvXPbFqPxv032T7ds79bd.png);

/*娃娃圖檔大小皆為100 x 100*/
--娃娃1被夾: url(https://images.plurk.com/7ued96aikVYAF9I1mTVnrg.png);
--娃娃1落下: url(https://images.plurk.com/2j4I2JmoyuZ2Lby5j8zNX0.png);
--娃娃1展示: url(https://images.plurk.com/6GSX5qUGEnuCbfOMAIAKKb.png);

--娃娃2被夾: url(https://images.plurk.com/3ksTGG3aYlYGsKhmIpY8u1.png);
--娃娃2落下: url(https://images.plurk.com/cvPA8bvp8W59RxwyZ8MVC.png);
--娃娃2展示: url(https://images.plurk.com/1n00BHrburlxNYsyKhtN0h.png);

/*圖檔大小為 寬28 x 高20*/
--移動按鈕: url(https://images.plurk.com/1v9TQzEQdbWjocdrkOq3MN.png);

/*圖檔大小為 寬84 x 高20*/
--抓取圖案: url(https://images.plurk.com/24FbsMC4VOWTcbuSW3wBXJ.png);
}

/* ======== 主體 ======== */

footer { position:fixed; z-index: 9000; height: 300px; width: 300px; }
#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;
position:absolute; top: 17px; left: 0; z-index: -2;
width: 100px; height: 0;
background: linear-gradient(#000, #000) no-repeat center top / 2px 100%;
}

/*繩子移動拉長*/
#footer ul li:is(:nth-child(1), :nth-child(3), :nth-child(5)):hover ~ :last-child { left: 90px; }
#footer ul li:is(:nth-child(2), :nth-child(4), :nth-child(6)):hover ~ :last-child { left: 170px; }
#footer ul li:is(:nth-child(3), :nth-child(4)):active ~ :last-child { transition: height .6s; height: 80px; }
#footer ul li:is(:nth-child(5), :nth-child(6)):hover ~ :last-child { transition: height .6s, left .6s .6s; height: 0; left: 0; }

/*夾子*/
#footer ul li:last-child:before {
content: ""; display:block;
transition: background 0s 1.2s;
position:absolute; top: 100%; left: 0;
width: 100px; height: 80px;
background: var(--夾子開);
}

/*夾子開關*/
#footer ul li:is(:nth-child(3), :nth-child(4)):active ~ :last-child:before { background: var(--夾子關); }
#footer ul li:is(:nth-child(5), :nth-child(6)):hover ~ :last-child:before { background: var(--夾子開); }

/* ======== 娃娃 ======== */

#footer ul li: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;
}
#footer ul li:nth-child(3):active ~ :last-child:after { background-image: var(--娃娃1被夾); }
#footer ul li:nth-child(4):active ~ :last-child:after { background-image: var(--娃娃2被夾); }

#footer ul li:is(:nth-child(5), :nth-child(6)):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: 190px;
height: 100px; padding-top: 0;
background-position: left top 100px;
}

#footer ul li:nth-child(5):hover ~ :last-child:after { background-image: var(--娃娃1落下); content: var(--娃娃1展示); }
#footer ul li:nth-child(6):hover ~ :last-child:after { background-image: var(--娃娃2落下); content: var(--娃娃2展示); }

/* ======== 按鈕 ======== */

/*移動按鈕*/
#footer ul li:nth-child(-n+2) {
position:absolute; bottom: 110px;
background: var(--移動按鈕);
width: 28px; height: 20px; right: 40px;
}
#footer ul li:nth-child(1) { margin-right: 33px; }

/*抓取按鈕*/
#footer ul li:is(:nth-child(3), :nth-child(4)) {
position:absolute; bottom: 85px; right: 30px;
width: 84px; height: 25px;
transform: scale(0); background: var(--抓取圖案);
}

/*抓取按鈕亮起*/
#footer ul li:nth-child(1):hover ~ :nth-child(3),
#footer ul li:nth-child(2):hover ~ :nth-child(4)
{ transition: transform 0s .6s; transform: scale(1); }
#footer ul li:is(:nth-child(n)):hover { transform: scale(1); }

/*抓取的動畫*/
#footer ul li:nth-child(3):active ~ :nth-child(5),
#footer ul li:nth-child(4):active ~ :nth-child(6)
{ transition: transform 0s 1.2s; transform: scale(1); }
#footer li:is(:nth-child(5), :nth-child(6))
{ transform: scale(0); position:absolute; top: 0; left: 0; width: 100%; height: 100%; }