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

#about_me u:last-child {
	/*噗寶整體在畫面的左右位置*/ left: 10px; /*left可改right*/
	/*噗寶整體在畫面的上下位置*/ bottom: 10px; /*bottom可改top*/

	/*噗寶整體寬度*/ width: 300px;
	/*噗寶整體高度*/ height: 300px;
	--機器背景: url(https://images.plurk.com/sg4KvZm4Qj5qLvLaHxrpf.png);
	--機器殼: url(https://images.plurk.com/3ag6IgAXtoF4NICwdCH0Wg.png);

	--夾子寬度: 100px;
	--夾子高度: 80px;
	--夾子初始上下位置: 17px;
	--夾子初始左右位置: 0px;
	--夾子移動位置1: 70px;
	--夾子移動位置2: 110px;
	--夾子移動位置3: 150px;
	--夾子移動位置4: 190px;

	--夾子開: url(https://images.plurk.com/2xshFXKxPIAB0nLDCdQLEO.png);
	--夾子關: url(https://images.plurk.com/6BTBZBJshCRJjZYvSPrPHH.png);

	--繩子粗細: 2px;
	--夾子拉長時繩子長度: 80px;
	--夾子線顏色1: #000000;
	--夾子線顏色2: #000000;

	--娃娃寬度: 100px;
	--娃娃高度: 100px;
	--娃娃落下距離: 190px;
	--娃娃在夾子上的左右位置: 0px;
	--娃娃在夾子上的上下位置: -10px;

	--娃娃1被夾: url(https://images.plurk.com/n1VnqqZiMK2P9Ulm2Xw72.png);
	--娃娃1落下: url(https://images.plurk.com/1Vstjf2Do3yY5a2z8mqMlf.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);

	--娃娃3被夾: url(https://images.plurk.com/5JTe6j43b8OCJSOwXyMStk.png);
	--娃娃3落下: url(https://images.plurk.com/5APFdgDHxgwRIr6RoeP8Jm.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);

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

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

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

#about_me u:last-child { position:fixed; z-index: 9000; background: var(--機器背景); }
#about_me u:last-child i:nth-last-child(2) { content: var(--機器殼); position:absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; }
#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, 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%;
}

/*繩子移動拉長*/
#about_me u:last-child i:is(:nth-child(1), :nth-child(5), :nth-child(9)):hover ~ :last-child { left: var(--夾子移動位置1); }
#about_me u:last-child i:is(:nth-child(2), :nth-child(6), :nth-child(10)):hover ~ :last-child { left: var(--夾子移動位置2); }
#about_me u:last-child i:is(:nth-child(3), :nth-child(7), :nth-child(11)):hover ~ :last-child { left: var(--夾子移動位置3); }
#about_me u:last-child i:is(:nth-child(4), :nth-child(8), :nth-child(12)):hover ~ :last-child { left: var(--夾子移動位置4); }

#about_me u:last-child i:is(:nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)):active ~ :last-child { transition: height .6s; height: var(--夾子拉長時繩子長度); }
#about_me u:last-child i:is(:nth-child(9), :nth-child(10), :nth-child(11), :nth-child(12)):hover ~ :last-child { transition: height .6s, left .6s .6s; height: 0; left: var(--夾子初始左右位置); }

/*夾子*/
#about_me u:last-child i:last-child:before {
	content: ""; display:block;
	transition: background 0s 1.2s;
	position:absolute; top: 100%; left: 0;
	width: var(--夾子寬度); height: var(--夾子高度);
	background: var(--夾子開);
}

/*夾子開關*/
#about_me u:last-child i:is(:nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)):active ~ :last-child:before { background: var(--夾子關); }
#about_me u:last-child i:is(:nth-child(9), :nth-child(10), :nth-child(11), :nth-child(12)):hover ~ :last-child:before { background: var(--夾子開); }

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

#about_me u:last-child i: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;
}
#about_me u:last-child i:nth-child(5):active ~ :last-child:after { background-image: var(--娃娃1被夾); }
#about_me u:last-child i:nth-child(6):active ~ :last-child:after { background-image: var(--娃娃2被夾); }
#about_me u:last-child i:nth-child(7):active ~ :last-child:after { background-image: var(--娃娃3被夾); }
#about_me u:last-child i:nth-child(8):active ~ :last-child:after { background-image: var(--娃娃4被夾); }

#about_me u:last-child i:is(:nth-child(9), :nth-child(10), :nth-child(11), :nth-child(12)):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(--娃娃高度);
}

#about_me u:last-child i:nth-child(9):hover ~ :last-child:after { background-image: var(--娃娃1落下); content: var(--娃娃1展示); }
#about_me u:last-child i:nth-child(10):hover ~ :last-child:after { background-image: var(--娃娃2落下); content: var(--娃娃2展示); }
#about_me u:last-child i:nth-child(11):hover ~ :last-child:after { background-image: var(--娃娃3落下); content: var(--娃娃3展示); }
#about_me u:last-child i:nth-child(12):hover ~ :last-child:after { background-image: var(--娃娃4落下); content: var(--娃娃4展示); }

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

/*移動按鈕*/
#about_me u:last-child i:nth-child(-n+4) {
	position:absolute; bottom: calc(var(--整組按紐距離機台下方位置) + var(--抓取按鈕高度));
	background: var(--移動按鈕); right: var(--整組按紐距離機台右側位置);
	width: var(--按鈕寬度); height: var(--按鈕高度);
}
#about_me u:last-child i:nth-child(3) { margin-right: var(--按鈕寬度); }
#about_me u:last-child i:nth-child(2) { margin-right: calc(var(--按鈕寬度) * 2); }
#about_me u:last-child i:nth-child(1) { margin-right: calc(var(--按鈕寬度) * 3); }

/*抓取按鈕*/
#about_me u:last-child i:is(:nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)) {
	position:absolute; bottom: var(--整組按紐距離機台下方位置); right: var(--整組按紐距離機台右側位置);
	width: calc(var(--按鈕寬度) * 4); height: var(--抓取按鈕高度);
	transform: scale(0); background: var(--抓取圖案);
}

/*抓取按鈕亮起*/
#about_me u:last-child i:nth-child(1):hover ~ :nth-child(5),
#about_me u:last-child i:nth-child(2):hover ~ :nth-child(6),
#about_me u:last-child i:nth-child(3):hover ~ :nth-child(7),
#about_me u:last-child i:nth-child(4):hover ~ :nth-child(8)
{ 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(5):active ~ :nth-child(9),
#about_me u:last-child i:nth-child(6):active ~ :nth-child(10),
#about_me u:last-child i:nth-child(7):active ~ :nth-child(11),
#about_me u:last-child i:nth-child(8):active ~ :nth-child(12)
{ transition: transform 0s 1.2s; transform: scale(1); }
#about_me u:last-child i:is(:nth-child(9), :nth-child(10), :nth-child(11), :nth-child(12))
{ transform: scale(0); position:absolute; top: 0; left: 0; width: 100%; height: 100%; }