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
/* ======== Setting area ======== */

footer {
	/*Popo is on the left and right of the screen*/
	left: 0; /*left can be changed to right*/
	/*Popo is on the top and bottom of the screen*/
	bottom: 0; /*bottom can be changed to top*/

	/* Machine image file size is 300 x 300 */
	--machine_background: url(https://images.plurk.com/sg4KvZm4Qj5qLvLaHxrpf.png);
	--machine_shell: url(https://images.plurk.com/ApWi8JQTW7eFumxirp0Ar.png);

	/* The size of the clip images are all width 100 x height 80 */
	--clip_open: url(https://images.plurk.com/2xshFXKxPIAB0nLDCdQLEO.png);
	--clip_close: url(https://images.plurk.com/6BTBZBJshCRJjZYvSPrPHH.png);

	/* The size of the doll image files are all 100 x 100 */
	--doll_1_clipped: url(https://images.plurk.com/n1VnqqZiMK2P9Ulm2Xw72.png);
	--doll_1_falls: url(https://images.plurk.com/1Vstjf2Do3yY5a2z8mqMlf.png);
	--doll_1_show: url(https://images.plurk.com/6VzfFSpIMfzWZr1trJg5kd.png);

	--doll_2_clipped: url(https://images.plurk.com/3vh0850QSbAjaHh0Pev9Tc.png);
	--doll_2_falls: url(https://images.plurk.com/35yuiwCQKp8PCmP41RcKGf.png);
	--doll_2_show: url(https://images.plurk.com/KpsBqzvqqML9FPgLuL1vk.png);

	--doll_3_clipped: url(https://images.plurk.com/5JTe6j43b8OCJSOwXyMStk.png);
	--doll_3_falls: url(https://images.plurk.com/5APFdgDHxgwRIr6RoeP8Jm.png);
	--doll_3_show: url(https://images.plurk.com/1T5qpuYb89XCichdk8rIwy.png);

	/* The image size is 28 width x 20 height */
	--move_button: url(https://images.plurk.com/41UCdvsO50RGiPnE4jRpcj.png);

	/* The size of the image file is width 84 x height 20 */
	--grab_pattern: url(https://images.plurk.com/2hysYwfsH9NivdMW43Evgv.png);
}

/* ======== Machine_main ======== */

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(--machine_background); position:relative; z-index: 0; }
#footer ul li:nth-last-child(2) { content: var(--machine_shell); position:absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; }

/* ======== Clips ======== */

/* rope */
#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%;
}

/* The rope moves and stretches */
#footer ul li:is(:nth-child(1), :nth-child(4), :nth-child(7)):hover ~ :last-child { left: 70px; }
#footer ul li:is(:nth-child(2), :nth-child(5), :nth-child(8)):hover ~ :last-child { left: 130px; }
#footer ul li:is(:nth-child(3), :nth-child(6), :nth-child(9)):hover ~ :last-child { left: 190px; }
#footer ul li:is(:nth-child(4), :nth-child(5), :nth-child(6)):active ~ :last-child { transition: height .6s; height: 80px; }
#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: 0; }

/* clip */
#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(--clip_open);
}

/* clip switch */
#footer ul li:is(:nth-child(4), :nth-child(5), :nth-child(6)):active ~ :last-child:before { background: var(--clip_close); }
#footer ul li:is(:nth-child(7), :nth-child(8), :nth-child(9)):hover ~ :last-child:before { background: var(--clip_open); }

/* ======== Doll ======== */

#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(4):active ~ :last-child:after { background-image: var(--doll_1_clipped); }
#footer ul li:nth-child(5):active ~ :last-child:after { background-image: var(--doll_2_clipped); }
#footer ul li:nth-child(6):active ~ :last-child:after { background-image: var(--doll_3_clipped); }

#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: 190px;
	height: 100px; padding-top: 0;
	background-position: left top 100px;
}

#footer ul li:nth-child(7):hover ~ :last-child:after { background-image: var(--doll_1_falls); content: var(--doll_1_show); }
#footer ul li:nth-child(8):hover ~ :last-child:after { background-image: var(--doll_2_falls); content: var(--doll_2_show); }
#footer ul li:nth-child(9):hover ~ :last-child:after { background-image: var(--doll_3_falls); content: var(--doll_3_show); }

/* ======== Button ======== */

/* move button */
#footer ul li:nth-child(-n+3) {
	position:absolute; bottom: 110px;
	background: var(--move_button);
	width: 28px; height: 20px; right: 30px;
}
#footer ul li:nth-child(2) { margin-right: 28px; }
#footer ul li:nth-child(1) { margin-right: 56px; }

/* Grab button */
#footer ul li:is(:nth-child(4), :nth-child(5), :nth-child(6)) {
	position:absolute; bottom: 85px; right: 30px;
	width: 84px; height: 25px;
	transform: scale(0); background: var(--grab_pattern);
}

/* Grab button lights up */
#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); }

/* Grab animation */
#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%; }