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
/* 翻頁隨機噗寶 */

#dynamic_logo, #creature, #dynamic_logo::before, #dynamic_logo::after{
background: no-repeat left/contain;
}

#creature, #dynamic_logo::after{
width:320px !important; /* 圖片寬度 */
height:200px !important; /* 圖片高度 */
}

#dynamic_logo{
z-index:9999;
position:fixed;
bottom:10px;
right:10px;
display:flex;
background-image:url(https://images.plurk.com/7xGx93umMFmRrzGeJgkC0d.gif), /* 書本圖片，小心不要刪到逗號 */
url(https://images.plurk.com/2ae7p1uET91Cn8SRGVcpzU.png); /* 書本陰影圖片 */
}

#dynamic_logo::before{
content:"";
position:absolute;
margin-left:163px;
width:160px;
height:200px;
left:calc(50% - 160px);
background:url(https://images.plurk.com/63Pztx0Tq4qejA1POopQ5v.png); /* 書頁圖片 */
transform-origin:left;
transition: ease-in-out 1s;
order:0;
opacity:1;
z-index:-1;
}

#dynamic_logo:hover::before{
transform: rotate3d(0,1, 0, -180deg);
}

#dynamic_logo::after{
content:"";
position:absolute;
background:url(https://ltlydiaart.000webhostapp.com/test/up.php); /* 上層隨機人物圖片 */
transition:ease-in-out .5s;
transition-delay:.5s;
top:calc(50% - 100px);
left:calc(50% - 160px);
}

#creature{
content:"";
padding-right:320px;
left: calc(50% - 160px);
background:url(https://ltlydiaart.000webhostapp.com/test2/down.php); /* 下層人物圖片 */
opacity:0;
z-index:0;
}

#dynamic_logo:hover::after{
opacity:0;
transition-delay:0s;
}

#dynamic_logo:hover #creature{
opacity:1;
transition:ease-in-out .5s;
}