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

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

	/*噗寶整體寬度*/ width: 200px;
	/*噗寶整體高度*/ height: 400px;
	--機器背景: url(https://images.plurk.com/2VfY8ENzMbmK9mxyETdQT1.png);
	--機器殼: url(https://images.plurk.com/3jeLOeV3zj2rjiaoQhv76C.png);

	--夾子寬度: 70px;
	--夾子高度: 60px;
	--夾子初始上下位置: 61px;
	--夾子初始左右位置: 17px;
	--夾子移動位置1: 60px;
	--夾子移動位置2: 85px;
	--夾子移動位置3: 110px;

	--夾子開: url(https://images.plurk.com/5pdkNXag661e6ok104Yc54.png);
	--夾子關: url(https://images.plurk.com/1cg7R05f6Zs2xBkBYtLDOr.png);

	--繩子粗細: 2px;
	--夾子拉長時繩子長度: 50px;
	--夾子線顏色1: #ff685f;
	--夾子線顏色2: #ffc6c6;

	--娃娃寬度: 70px;
	--娃娃高度: 70px;
	--娃娃落下距離: 238px;
	--娃娃在夾子上的左右位置: 0px;
	--娃娃在夾子上的上下位置: -1px;

	--娃娃1被夾: url(https://images.plurk.com/2povvNFtlMouNEsWULcitI.png);
	--娃娃1落下: url(https://images.plurk.com/7Mq8f19MihqHxT8vXierDY.png);
	--娃娃1展示: url(https://images.plurk.com/6nisqdH2wVQVyHJt0GMYys.png);

	--娃娃2被夾: url(https://images.plurk.com/5EVXwaoazfSzIykHdUcHrO.png);
	--娃娃2落下: url(https://images.plurk.com/3xanboxu48TTCWMhtkInXE.png);
	--娃娃2展示: url(https://images.plurk.com/6eoQIJLa983bOjUbDFshlQ.png);

	--娃娃3被夾: url(https://images.plurk.com/2t1SEeMBrtGQ4KgR9j5fUZ.png);
	--娃娃3落下: url(https://images.plurk.com/5IkRaXdU7Lw8rQxUf1QtVW.png);
	--娃娃3展示: url(https://images.plurk.com/519NVHTnXWuI97wLuvtNeb.png);

	--整組按紐距離機台下方位置: 158px;
	--整組按紐距離機台右側位置: 63px;
	--按鈕寬度: 28px;
	--按鈕高度: 20px;
	--移動按鈕: url(https://images.plurk.com/5fC0zHhhEFffx157TROap6.png);

	/*抓取按紐寬度為移動按紐的寬度x3*/
	--抓取按鈕高度: 25px;
	--抓取圖案: url(https://images.plurk.com/3o8QAIDp1FnS0ipjwlKD57.png);
}

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

footer { position:fixed; z-index: 9000; }
#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: var(--夾子初始上下位置); left: var(--夾子初始左右位置); z-index: -2;
	width: var(--夾子寬度); height: 0;
	background: linear-gradient(to top, var(--夾子線顏色2), var(--夾子線顏色1)) no-repeat center top / var(--繩子粗細) 100%;
}

/*繩子移動拉長*/
#footer ul li:is(:nth-child(1), :nth-child(4), :nth-child(7)):hover ~ :last-child { left: var(--夾子移動位置1); }
#footer ul li:is(:nth-child(2), :nth-child(5), :nth-child(8)):hover ~ :last-child { left: var(--夾子移動位置2); }
#footer ul li:is(:nth-child(3), :nth-child(6), :nth-child(9)):hover ~ :last-child { left: var(--夾子移動位置3); }
#footer ul li:is(:nth-child(4), :nth-child(5), :nth-child(6)):active ~ :last-child { transition: height .6s; height: var(--夾子拉長時繩子長度); }
#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: var(--夾子初始左右位置); }

/*夾子*/
#footer ul li:last-child:before {
	content: ""; display:block;
	transition: background 0s 1.2s;
	position:absolute; top: 100%; left: 0;
	width: var(--夾子寬度); height: var(--夾子高度);
	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% + var(--娃娃在夾子上的上下位置)); left: var(--娃娃在夾子上的左右位置);
	width: var(--娃娃寬度); height: 0; padding-top: var(--娃娃高度); 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: var(--娃娃落下距離);
	height: var(--娃娃高度); padding-top: 0;
	background-position: left top var(--娃娃高度);
}

#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: calc(var(--整組按紐距離機台下方位置) + var(--抓取按鈕高度));
	background: var(--移動按鈕); right: var(--整組按紐距離機台右側位置);
	width: var(--按鈕寬度); height: var(--按鈕高度);
}
#footer ul li:nth-child(2) { margin-right: var(--按鈕寬度); }
#footer ul li:nth-child(1) { margin-right: calc(var(--按鈕寬度) * 2); }

/*抓取按鈕*/
#footer ul li:is(:nth-child(4), :nth-child(5), :nth-child(6)) {
	position:absolute; bottom: var(--整組按紐距離機台下方位置); right: var(--整組按紐距離機台右側位置);
	width: calc(var(--按鈕寬度) * 3); height: var(--抓取按鈕高度);
	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%; }