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
162
163
164
165
166
167
/* ======== 設定區 ======== */

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

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

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

	/*娃娃圖檔大小皆為100 x 100*/
	--娃娃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);

	--娃娃5被夾: url(https://images.plurk.com/2Gv81sGToycxBhxHg7MRS2.png);
	--娃娃5落下: url(https://images.plurk.com/6hZfxtGQXXaGEehBr5L4tV.png);
	--娃娃5展示: url(https://images.plurk.com/1UpaW2XL7jKCDMp9fRsQv4.png);

	--娃娃6被夾: url(https://images.plurk.com/2pyzZmj1h597NkMMiZtNLw.png);
	--娃娃6落下: url(https://images.plurk.com/g1eDj2JtfgK2ju9tyBRMQ.png);
	--娃娃6展示: url(https://images.plurk.com/1Lz6hNEdZEioHgoBYUK7Zo.png);

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

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

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

#about_me u:last-child {
	position:fixed; z-index: 9000; height: 300px; width: 300px;
	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, transform .6s .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%;
	transform-origin: center top;
	transform: scale(1);
}

/*繩子移動拉長*/
#about_me u:last-child i:is(:nth-child(1), :nth-child(7), :nth-child(13)):hover ~ :last-child { left: 70px; }
#about_me u:last-child i:is(:nth-child(2), :nth-child(8), :nth-child(14)):hover ~ :last-child { left: 130px; }
#about_me u:last-child i:is(:nth-child(3), :nth-child(9), :nth-child(15)):hover ~ :last-child { left: 190px; }
#about_me u:last-child i:is(:nth-child(4), :nth-child(10), :nth-child(16)):hover ~ :last-child { left: 90px; transform: scale(0.8); }
#about_me u:last-child i:is(:nth-child(5), :nth-child(11), :nth-child(17)):hover ~ :last-child { left: 130px; transform: scale(0.8); }
#about_me u:last-child i:is(:nth-child(6), :nth-child(12), :nth-child(18)):hover ~ :last-child { left: 170px; transform: scale(0.8); }

#about_me u:last-child i:is(:nth-child(7), :nth-child(8), :nth-child(9)):active ~ :last-child { transition: height .6s; height: 80px; }
#about_me u:last-child i:is(:nth-child(10), :nth-child(11), :nth-child(12)):active ~ :last-child { transition: height .6s; height: 100px; }
#about_me u:last-child i:is(:nth-child(13), :nth-child(14), :nth-child(15), :nth-child(16), :nth-child(17), :nth-child(18)):hover ~ :last-child
{ transition: height .6s, transform .6s .6s, left .6s 1.2s; height: 0; left: 0; transform: scale(1); }

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

/*夾子開關*/
#about_me u:last-child i:is(:nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11), :nth-child(12)):active ~ :last-child:before
{ background: var(--夾子關); transition: background 0s 1.2s; }
#about_me u:last-child i:is(:nth-child(13), :nth-child(14), :nth-child(15), :nth-child(16), :nth-child(17), :nth-child(18)):hover ~ :last-child:before
{ background: var(--夾子開); transition: background 0s 1.8s; }

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

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

#about_me u:last-child i:is(:nth-child(13), :nth-child(14), :nth-child(15), :nth-child(16), :nth-child(17), :nth-child(18)):hover ~ :last-child:after {
	transition: background-image 0s 1.8s, margin-top .6s 1.8s, padding 0s 2.4s, height 0s 2.4s, background-position 0s 2.4s;
	transform: scale(1);
	margin-top: 190px;
	height: 100px; padding-top: 0;
	background-position: left top 100px;
}

#about_me u:last-child i:nth-child(13):hover ~ :last-child:after { background-image: var(--娃娃1落下); content: var(--娃娃1展示); }
#about_me u:last-child i:nth-child(14):hover ~ :last-child:after { background-image: var(--娃娃2落下); content: var(--娃娃2展示); }
#about_me u:last-child i:nth-child(15):hover ~ :last-child:after { background-image: var(--娃娃3落下); content: var(--娃娃3展示); }
#about_me u:last-child i:nth-child(16):hover ~ :last-child:after { background-image: var(--娃娃4落下); content: var(--娃娃4展示); }
#about_me u:last-child i:nth-child(17):hover ~ :last-child:after { background-image: var(--娃娃5落下); content: var(--娃娃5展示); }
#about_me u:last-child i:nth-child(18):hover ~ :last-child:after { background-image: var(--娃娃6落下); content: var(--娃娃6展示); }

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

/*移動按鈕*/
#about_me u:last-child i:nth-child(-n+6) {
	position:absolute; bottom: 65px;
	background: var(--移動按鈕);
	width: 28px; height: 20px; right: 30px;
}
#about_me u:last-child i:nth-child(6) { margin-bottom: 45px; }
#about_me u:last-child i:nth-child(5) { margin-bottom: 45px; margin-right: 28px; }
#about_me u:last-child i:nth-child(4) { margin-bottom: 45px; margin-right: 56px; }
#about_me u:last-child i:nth-child(2) { margin-right: 28px; }
#about_me u:last-child i:nth-child(1) { margin-right: 56px; }

/*抓取按鈕*/
#about_me u:last-child i:is(:nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11), :nth-child(12)) {
	position:absolute; bottom: 85px; right: 30px;
	width: 84px; height: 25px;
	transform: scale(0); background: var(--抓取圖案);
}

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