jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

今日脚印掀角放大露出整棵祈福树，纸背加「祈福」(v26100449)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-05 02:51:43 +00:00
parent 14cd1e7ad1
commit 5f62d32ba2
3 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
mama-box.css
View File

@@ -4670,28 +4670,31 @@ a.skip:focus{left:16px;top:16px}
/* ============ 祈福树入口 · 今日脚印掀角（2026-10-05） ============
用户：「祈福树放到今日脚印的右上角，把右上角掀开一点，再把祈福树露出来」（之前放工具卡右上角 / 头图底边，已撤）。
画法（全在卡片里面，不动卡片本身的毛玻璃 / 圆角）：
· .fp-peel 是右上角 S×S 的方块（S = --pl，默认 46px）；
· .fp-peel 是右上角 S×S 的方块（S = --pl，默认 76px；10-05 用户「再大一点，把树大概完整露出来，加『祈福』两个小字」从 46 放大）；
· .pl-hole = 方块右上那半个三角（对角线以上），代表「纸掀开后底下那层」：暖米色 + 祈福树，右上角跟卡片一样 26px 圆角；
· .pl-flap = 方块左下那半个三角，就是被掀起来、翻过去的那一角纸背（对角线上最亮，往折角尖渐暗），外层 .pl-flapw 打投影；
· 偶尔动一动：每 7 秒最后一下纸角再掀起一点（--pl 46 → 52）、树轻轻摆，再落回去。
「全部 ›」往左让 34px（纸角左边线在卡片右边往里 46px，掀起时 52px），不被纸角压住。图用宝宝祈福提供的缩略图（裁边缩到 150px 存本地）。 */
· 偶尔动一动：每 7 秒最后一下纸角再掀起一点（--pl 76 → 82）、树轻轻摆，再落回去。
「全部 ›」往左让 50px（纸角左边线在卡片右边往里 76px，掀起时 82px），不被纸角压住。
· .pl-t「祈福」两个小字写在翻起来的纸背（左下三角）上。图用宝宝祈福提供的缩略图（裁边缩到 150px 存本地）。 */
.today-line{position:relative}
.today-line .fp-all{margin-right:34px}
@property --pl{syntax:"<length>";inherits:true;initial-value:46px}
.fp-peel{--pl:46px;position:absolute;top:0;right:0;z-index:4;width:var(--pl);height:var(--pl);display:block;
.today-line .fp-all{margin-right:50px}
@property --pl{syntax:"<length>";inherits:true;initial-value:76px}
.fp-peel{--pl:76px;position:absolute;top:0;right:0;z-index:4;width:var(--pl);height:var(--pl);display:block;
-webkit-tap-highlight-color:transparent;animation:plLift 7s ease-in-out infinite}
.pl-hole{position:absolute;inset:0;border-top-right-radius:26px;overflow:hidden;
-webkit-clip-path:polygon(0 0,100% 0,100% 100%);clip-path:polygon(0 0,100% 0,100% 100%);
background:linear-gradient(225deg,#F4E6DC 0%,#EBD6C8 70%,#E2C9B9 100%)}
.pl-hole img{position:absolute;right:1px;top:1px;width:36px;height:35px;display:block;
.pl-hole img{position:absolute;right:4px;top:4px;width:42px;height:40px;display:block;
transform-origin:50% 100%;animation:dqSway 7s ease-in-out infinite;filter:drop-shadow(0 1px 1.5px rgba(70,40,20,.25))}
.pl-flapw{position:absolute;inset:0;filter:drop-shadow(-2px 3px 3px rgba(90,50,30,.22));pointer-events:none}
.pl-flap{position:absolute;inset:0;-webkit-clip-path:polygon(0 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 100%,0 100%);
background:linear-gradient(45deg,#E9DFD8 0%,#F7F2EE 45%,#FFFFFF 62%,#F3EDE9 100%)}
.pl-t{position:absolute;left:7px;bottom:7px;font-size:11px;font-weight:800;letter-spacing:1px;line-height:1;color:#C2503E;pointer-events:none}
.fp-peel:active{opacity:.7}
@keyframes plLift{0%,82%,100%{--pl:46px}89%{--pl:52px}95%{--pl:47px}}
@keyframes plLift{0%,82%,100%{--pl:76px}89%{--pl:82px}95%{--pl:77px}}
@keyframes dqSway{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-3.5deg)}93%{transform:rotate(2.5deg)}97%{transform:rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.fp-peel,.pl-hole img{animation:none}}