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
/* 翻頁隨機頭貼 */

#profile_pic, #span_years::after, .profile-info::before, .profile-info::after{
background: no-repeat left/contain;
}

#profile_pic, .profile-info::before, .profile-info::after{
width:320px !important; /* 圖片寬度 */
height:200px !important; /* 圖片高度 */
}

#profile_pic{
content:"";
padding-right:320px;
left: calc(50% - 160px);
top:-40px;
background:url(https://images.plurk.com/HIonlwUwXE6AWGRLGscpW.png), /* 書本圖片，小心不要刪到逗號 */
url(https://images.plurk.com/2ae7p1uET91Cn8SRGVcpzU.png); /* 書本陰影圖片 */
}

#dash-profile{
height: 200px !important;
}

#full_name{
position: absolute;
top:160px;
margin:0 !important;
margin-left:5px !important;
}

.profile-info{
width: 320px;
margin: 0 !important;
height: 200px;
font-size:0;
opacity: 1 !important;
left: calc(50% - 160px);
top:calc(50% - 100px);
}


#span_years::after{
content:"";
position:absolute;
margin-left:160px;
width:160px;
height:200px;
background:url(https://images.plurk.com/4gaLWPcbsX7zXDTi83aHvw.png); /* 書頁圖片 */
transform-origin:left;
transition: ease-in-out 1s;
top:-40px;
z-index:1;
}

#dash-profile:hover .profile-info #span_years::after{
transform: rotate3d(0, 1, 0, -180deg);
}

.profile-info::before{
content:"";
position:absolute;
background:url(https://addddddo.000webhostapp.com/test222/123.php); /* 上層隨機人物圖片 */
z-index:2;
transition:ease-in-out .5s;
transition-delay:.5s;
top:calc(50% - 140px);
left:calc(50% - 160px);
}

.profile-info::after{
content:"";
position:absolute;
background:url(https://images.plurk.com/57ewtscq3Lg1lDGXpDOAC8.png); /* 下層人物圖片 */
z-index:1;
transition:ease-in-out .5s;
transition-delay:.5s;
top:calc(50% - 140px);
left:calc(50% - 160px);
opacity:0;
z-index:0;
transition:ease-in-out 0s;
}

#dash-profile:hover .profile-info::before{
opacity:0;
transition-delay:0s;
}

#dash-profile:hover .profile-info::after{
opacity:1;
transition:ease-in-out .5s;
}