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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
/* ========== 偵探的方形翻頁頭貼 ========== */
/* 會使用到 .profile-info、#span_years、#dash-profile、#full_name、#profile_pic */
/* 有調整過這些區塊的人使用效果可能會有落差，需要另外調整環境設定 */


/* ----- 宣告變數 ----- */
/* 為方便調整替換圖片和位置，修改此區數值即可 */
html{

  /* ------ 設定頭貼 ------ */
    --bg-pic: url(https://images.plurk.com/5ds1ZEcBTeqdrkIe0CE7Qr.png);  /* 底圖圖片 */
    --sticker-pic: url(https://images.plurk.com/3X8curwaKyXEsz2o1xV68W.gif);  /* 貼紙圖片 */
    --pic-width: 150px;  /* 頭貼寬度 */
    --pic-height: 150px;  /* 頭貼高度 */
    --second-profile-pic: var(--pic-width);  /* 如要用原本頭貼當底圖，請改成0 */

  /* ------ 摺角顏色 ------ */
  /* 這邊是漸層語法，可以先在產生器設定好喜歡的漸層再複製語法貼上 */
  /* 漸層語法產生器網頁：https://cssgradient.io/ */
    --corner-color: linear-gradient(135deg, rgba(255,0,0,0), rgba(100,100,100,0.6) 80%);  /* 待機摺角顏色 */
    --corner-hover-color: linear-gradient(135deg, rgba(46,139,87,1), rgba(100,100,100,1) 100%);  /* 游標移上來後摺角顏色 */

  /* ------ 設定人物 ------ */
  /* ------ 待機 ------ */
    --char: url(https://images.plurk.com/15bSzYif6eR1bAzHCNuYh3.png);  /* 待機人物圖片 */
    --char-width: 58px;  /* 待機人物寬度 */
    --char-height: 89px;  /* 待機人物高度 */
  /* ------ 移動 ------ */
    --char-move: url(https://images.plurk.com/5LzPmtutflK0MiK6QpxcdB.png); /* 移動人物圖片 */
    --char-move-width: 62px; /* 移動人物寬度 */
    --char-move-height: 78px; /* 移動人物高度 */
  /* ------ 最終 ------ */
    --char-fin: url(https://images.plurk.com/7MHlyOZoVzeodiJPcOj1Rv.png); /* 最終人物圖片 */
    --char-fin-width: 49px; /* 最終人物寬度 */
    --char-fin-height: 52px; /* 最終人物高度 */


  /* ------ 位置調整 ------ */
  /* 因套用圖片尺寸不同的關係會跑版(例：人物沒抓住摺角)，再微調到覺得適合的位置就可以了 */

    /* 待機人物位置 */
      --char-bottom: 0px;
      --char-left: -40px;

    /* 移動人物起點位置 */
      --move-top: 10px;
      --move-left: 10px;

    /* 最終人物位置 */
      --fin-top: 56%;
      --fin-left: 55%;
}


/* ----- 宣告變數結束 ----- */


/* ----- 環境設定，通常此區不需調整 ----- */

/* 欄位高度 */
#dash-profile{
  height: calc(var( --pic-height) + 50px) !important;  
}

/* 將名字位置改到頭貼下方 */
#full_name{
  margin: 0  !important;
  top: calc(var( --pic-height) + 10px);
  position: absolute;
  padding-left: 5px;
}

/* 頭貼寬高 */
#profile_pic{
  width: var(--pic-width);
  height: var(--pic-height);
}


.profile-info, span#span_years, span#span_years::after{
  box-sizing: border-box;
  display: block;
}

/* 頭貼圓角 */
span#span_years, img#profile_pic{
  border-radius:10px !important;
}

.profile-info{
  width: var(--pic-width);
  height: var(--pic-height);
  position: absolute;
  top: 0;
  left: 0;
  margin:0 !important;
  font-size:0;
  color: transparent;
  opacity:1 !important; 
}

/* 貼紙層 */
span#span_years{
  width: var(--pic-width);
  height: var(--pic-height);
  background: var(--sticker-pic) no-repeat center/contain;
  transform-origin: bottom right;
  clip-path:polygon(25px 0, 100% 0, 100% 100%, 0 100%, 0 25px);
  transition: 0.3s ease-in-out;
  top: 0 !important;
  position: absolute;
}

/* 摺角 */
span#span_years::after{
  content:"";
  width:25px;
  height: 25px;
  background-image: var(--corner-color);
  background-repeat: no-repeat;
  background-size: 25px 25px;
  background-position: 0px 0px;
  transition: 0.3s ease-in-out;
  border-bottom-right-radius:10px;
  position: absolute;
  top: 0;
}

/* 抓住摺角的人物 */
.profile-info::after{
  visibility:hidden;
  content:"";
  width: var(--char-move-width);
  height: var(--char-move-height);
  background: var(--char-move) no-repeat center/contain;
  position:absolute;
  top: var(--move-top);
  left: var(--move-left);
  opacity: 1;
}

.profile-info:hover::after{
  visibility:visible;
  top:100%;
  left:100%;
  opacity: 0;
  transition-property: top, left, opacity;
  transition-duration: 1s, 1s, 0.5s;
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
  transition-delay: 0s, 0s, 0.3s;
}

/* 待機人物 */
.profile-info::before{
  content:"";
  width: var(--char-width);
  height: var(--char-height);
  background: var(--char) no-repeat center/contain;
  position:absolute;
  bottom: var(--char-bottom);
  left: var(--char-left);
  z-index:1;
}

/* 最終人物 */
.profile-info:hover::before{
  background: var(--char-fin) no-repeat center/contain;
  width: var(--char-fin-width);
  height: var(--char-fin-height);
  top: var(--fin-top);
  left: var(--fin-left);
  z-index:0;
}

/* 滑鼠移上時摺角拉到最底 */
.profile-info:hover span#span_years{
  clip-path: polygon(100% 0, 100% 10%, 100% 100%, 10% 100%, 0 100%);
  background-position: 0px 0px;
  transform: rotate3d(1, -1 , 0, -60deg);
  transition: 1s ease-in-out ;
}

.profile-info:hover #span_years::after{
  width:100%;
  height:100%;
  background-size: var(--pic-width) var(--pic-height);
  background-position: 0px 0px;
  background-image: var(--corner-hover-color);
  filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.6));
  transition: 1s ease-in-out ;
}

/* 將原頭貼推出可視範圍 */
img#profile_pic{
  background: 
  var(--bg-pic) no-repeat center/var(--pic-width) var(--pic-height);
  padding-right: var(--second-profile-pic);
  width: var(--pic-width) !important;
  height: var(--pic-height) !important;
}