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
/* ======== 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 / 2 xshFXKxPIAB0nLDCdQLEO . png );
-- clip close: url( https : // images .plurk.com / 6BTBZBJshCRJjZYvSPrPHH.png ) ; _ _ _ _ _


/ *The size of the doll image files are all 100 x 100*/ --Doll 1 is clipped : url( https://images.plurk.com/n1VnqqZiMK2P9Ulm2Xw72.png ) ; --Doll 1 falls : url ( https : // images . .plurk.com / 1 Vstjf2Do3yY5a2z8mqMlf.png ) ; --Doll 1 show : url ( https://images.plurk.com/6VzfFSpIMfzWZr1trJg5kd.png ) ; _ _ _ _ _ _ _ _ _ _ _



--Doll 2 is clipped : url ( https://images.plurk.com/3vh0850QSbAjaHh0Pev9Tc.png ) ; --Doll 2 is dropped : url ( https://images.plurk.com/35yuiwCQKp8PCmP41RcKGf.png ) ; - _ _ _ _ _ _ _ _ _ _ _ _ - Doll 2 show : url ( https://images.plurk.com/KpsBqzvqqML9FPgLuL1vk.png ) ; _ _ _ _ _



--Doll 3 is clipped : url ( https://images.plurk.com/5JTe6j43b8OCJSOwXyMStk.png ) ; --Doll 3 is dropped : 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 * / --mobile button : url ( https://images.plurk.com/41UCdvsO50RGiPnE4jRpcj.png ) ;


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


/* ======== Body ======== */

footer { position : fixed ; z-index : 9000 ; height : 300 px ; width : 300 px ; }
# 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 .6 s ;
position : absolute ; top : 17 px ; left : 0 ; z-index : -2 ;
width : 100 px ; 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 : 70 px ; }
# footer ul li : is ( : nth-child ( 2 ), : nth-child ( 5 ), : nth-child( 8 )) : hover ~ : last-child { left : 130 px ; }
# footer ul li : is ( : nth-child ( 3 ), : nth-child ( 6 ), : nth-child ( 9 )) : hover ~ : last-child { left : 190 px ; }
# footer ul li : is( : nth-child ( 4 ), : nth-child ( 5 ), : nth-child ( 6 )) : active ~ : last-child { transition : height .6 s ; height : 80 px ; }
# footer ul li : is ( : nth-child ( 7 ), : nth-child ( 8 ), : nth-child (9 )) : hover ~ : last-child { transition : height .6 s , left .6 s .6 s ; height : 0 ; left : 0 ; }

/*clip*/
# footer ul li : last-child : before {
content : "" ; display : block ;
transition : background 0 s 1.2 s ;
position : absolute ; top : 100 % ; left : 0 ;
width : 100 px ; height : 80 px ;
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 off ); }
# footer ul li : is ( : nth-child ( 7 ), : nth-child (8 ), : nth-child ( 9 )) : hover ~ : last-child : before { background : var ( --clip on ); }

/* ======== doll======== */

# footer ul li : last-child : after {
content : "" ;
position : absolute ; top : calc ( 100 % - 10 px ); left : 0 ;
width : 100 px ; height : 0 ; padding-top : 100 px ; 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 is clipped ) ; } # footer ul li : nth-child ( 5 ) : active ~ : last-child
: after { background-image : var ( --doll 2 is clipped ); } # footer ul li : nth-child ( 6 ) : active ~ : last-child : after { background-image : var ( -- doll 3 is clipped clip ); }


# footer ul li : is ( : nth-child ( 7 ), : nth-child ( 8 ), : nth-child ( 9 )) : hover ~ : last-child : after {
transition : background-image 0 s 1.2 s , margin-top .6 s 1.2 s , padding 0 s 1.8 s , height 0 s 1.8 s , background-position 0 s 1.8 s ;
transform : scale ( 1 );
margin-top : 190 px ;
height : 100 px ; padding-top : 0 ;
background-position : left top 100 px ;
}

# footer ul li : nth-child ( 7 ) : hover ~ : last-child : after { background-image : var ( -- doll 1 falls ); content : var ( -- doll 1 shows ); }
# footer ul li : nth-child ( 8 ) : hover ~ : last-child : after { background-image : var ( --doll 2 falling ) ; content : var ( --doll 2 showing ); } # footer ul li : nth-child ( 9 ) : hover ~ : last-child : after { background- image : var ( --doll 3 fall ) ; content : var ( --doll 3 show ) ;
}

/* ======== button ======== */

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

/*grab button*/
# footer ul li : is ( : nth-child ( 4 ), : nth-child ( 5 ), : nth-child ( 6 )) {
position : absolute ; bottom : 85 px ; right : 30 px ;
width : 84 px ; height : 25 px ;
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 0 s .6 s ; 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 0 s 1.2 s ; 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 % ; }