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
/*在自介欄位最後一行加上下列「」內文字*/
/*「__* ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** *__*」/

/* ======== 設定區 ======== */

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

/*機器圖檔大小為 200 x 400*/
--機器背景: url(https://images.plurk.com/3V2u3Jy85rYPwUCrgynmCb.png);
--機器殼: url(https://images.plurk.com/22TDYkAu6me6ImTscGJo0e.png);

/*夾子圖檔大小皆為 寬70 x 高60*/
--夾子開: url(https://images.plurk.com/2EvDTacEQ6k5kYcof4DNAj.png);
--夾子關: url(https://images.plurk.com/7LoSCJ0U6FgSpcfK7RbYqH.png);

/*娃娃圖檔大小皆為70 x 70*/
--娃娃1被夾: url(https://images.plurk.com/743T6Vk4Jm4D3uHvpirXk2.png);
--娃娃1落下: url(https://images.plurk.com/743T6Vk4Jm4D3uHvpirXk2.png);
--娃娃1展示: url(https://images.plurk.com/743T6Vk4Jm4D3uHvpirXk2.png);

--娃娃2被夾: url(https://images.plurk.com/29lV8qBTKGtthdu2Cw0Jj1.png);
--娃娃2落下: url(https://images.plurk.com/29lV8qBTKGtthdu2Cw0Jj1.png);
--娃娃2展示: url(https://images.plurk.com/29lV8qBTKGtthdu2Cw0Jj1.png);

--娃娃3被夾: url(https://images.plurk.com/52oZlN4nMgBM3vIB5lhosy.png);
--娃娃3落下: url(https://images.plurk.com/52oZlN4nMgBM3vIB5lhosy.png);
--娃娃3展示: url(https://images.plurk.com/52oZlN4nMgBM3vIB5lhosy.png);

--娃娃4被夾: url(https://images.plurk.com/1QCrD6XFzudiZFIiou3BTM.png);
--娃娃4落下: url(https://images.plurk.com/1QCrD6XFzudiZFIiou3BTM.png);
--娃娃4展示: url(https://images.plurk.com/1QCrD6XFzudiZFIiou3BTM.png);

--娃娃5被夾: url(https://images.plurk.com/3boK85axm9UxUdLXKYB9e9.png);
--娃娃5落下: url(https://images.plurk.com/3boK85axm9UxUdLXKYB9e9.png);
--娃娃5展示: url(https://images.plurk.com/3boK85axm9UxUdLXKYB9e9.png);

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

/*圖檔大小為 寬140 x 高20*/
--抓取圖案: url(https://images.plurk.com/1zO2yMaoRmuItQGXNf3ekR.gif );
}

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

#about_me u:last-child {
position:fixed; z-index: 9000; height: 400px; width: 200px;
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;
position:absolute; top: 50px; left: 5px; z-index: -2;
width: 70px; height: 0;
background: linear-gradient(#000, #000) no-repeat center top / 2px 100%;
}

/*繩子移動拉長*/
#about_me u:last-child i:is(:nth-child(1), :nth-child(6), :nth-child(11)):hover ~ :last-child { left: 10px; }
#about_me u:last-child i:is(:nth-child(2), :nth-child(7), :nth-child(12)):hover ~ :last-child { left: 35px; }
#about_me u:last-child i:is(:nth-child(3), :nth-child(8), :nth-child(13)):hover ~ :last-child { left: 65px; }
#about_me u:last-child i:is(:nth-child(4), :nth-child(9), :nth-child(14)):hover ~ :last-child { left: 95px; }
#about_me u:last-child i:is(:nth-child(5), :nth-child(10), :nth-child(15)):hover ~ :last-child { left: 125px; }
#about_me u:last-child i:is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10)):active ~ :last-child { transition: height .6s; height: 80px; }
#about_me u:last-child i:is(:nth-child(11), :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15)):hover ~ :last-child { transition: height .6s, left .6s .6s; height: 0; left: 17px; top: 53px;}

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

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

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

#about_me u:last-child i:last-child:after {
content: "";
position:absolute; top: calc(100% + 26px); left: 0;
width: 70px; height: 0; padding-top: 100px; overflow: hidden;
display:block; transform: scale(0);
background-repeat: no-repeat;
}
#about_me u:last-child i:nth-child(6):active ~ :last-child:after { background-image: var(--娃娃1被夾); }
#about_me u:last-child i:nth-child(7):active ~ :last-child:after { background-image: var(--娃娃2被夾); }
#about_me u:last-child i:nth-child(8):active ~ :last-child:after { background-image: var(--娃娃3被夾); }
#about_me u:last-child i:nth-child(9):active ~ :last-child:after { background-image: var(--娃娃4被夾); }
#about_me u:last-child i:nth-child(10):active ~ :last-child:after { background-image: var(--娃娃5被夾); }

#about_me u:last-child i:is(:nth-child(11), :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15)):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: 205px;
height: 70px; padding-top: 0;
background-position: left top 70px;
}

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

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

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

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

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