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 {
	/*噗寶整體在畫面的左右位置*/ left: 0; /*left可改right*/
	/*噗寶整體在畫面的上下位置*/ bottom: 0; /*bottom可改top*/

	/*機器圖檔大小為 300 x 300*/
	--機器背景: url(https://images.plurk.com/sg4KvZm4Qj5qLvLaHxrpf.png);
	--機器殼: url(https://images.plurk.com/ApWi8JQTW7eFumxirp0Ar.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);

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

	/*圖檔大小為 寬84 x 高20*/
	--抓取圖案: url(https://images.plurk.com/2hysYwfsH9NivdMW43Evgv.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%; }