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

今日脚印掀角缩到 56px 不压待办卡，「祈福」改写在纸背正中顺折痕 (v26100451)

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

21
mama-box.css
View File

@@ -4672,30 +4672,31 @@ a.skip:focus{left:16px;top:16px}
/* ============ 祈福树入口 · 今日脚印掀角（2026-10-05） ============
用户：「祈福树放到今日脚印的右上角，把右上角掀开一点，再把祈福树露出来」（之前放工具卡右上角 / 头图底边，已撤）。
画法（全在卡片里面，不动卡片本身的毛玻璃 / 圆角）：
· .fp-peel 是右上角 S×S 的方块（S = --pl，默认 76px；10-05 用户「再大一点，把树大概完整露出来，加『祈福』两个小字」从 46 放大）；
· .fp-peel 是右上角 S×S 的方块（S = --pl，默认 56px；10-05 先按「再大一点、露出整棵树」放到 76，压住了下面「今日待办」小卡的边框，用户介意 → 收回 56，树缩到 31px 仍整棵可见）；
· .pl-hole = 方块右上那半个三角（对角线以上），代表「纸掀开后底下那层」：暖米色 + 祈福树，右上角跟卡片一样 26px 圆角；
· .pl-flap = 方块左下那半个三角，就是被掀起来、翻过去的那一角纸背（对角线上最亮，往折角尖渐暗），外层 .pl-flapw 打投影；
· 偶尔动一动：每 7 秒最后一下纸角再掀起一点（--pl 76 → 82）、树轻轻摆，再落回去。
「全部 ›」往左让 70px（纸角左边线是一条竖线，在卡片右边往里 76px、掀起时 82px，「全部」右边要落在它左边），不被纸角压住。
· .pl-t「祈福」两个小字写在翻起来的纸背（左下三角）上。图用宝宝祈福提供的缩略图（裁边缩到 150px 存本地）。 */
· 偶尔动一动：每 7 秒最后一下纸角再掀起一点（--pl 56 → 60）、树轻轻摆，再落回去。
「全部 ›」往左让 48px（纸角左边线是一条竖线，在卡片右边往里 56px、掀起时 60px，「全部」右边要落在它左边），不被纸角压住。
· .pl-t「祈福」两个小字写在翻起来的纸背（左下三角）正中，顺着折痕斜 45°，像写在纸背上（10-05 用户嫌原来摆在左下角不协调）。图用宝宝祈福提供的缩略图（裁边缩到 150px 存本地）。 */
.today-line{position:relative}
.today-line .fp-all{margin-right:70px}
@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;
.today-line .fp-all{margin-right:48px}
@property --pl{syntax:"<length>";inherits:true;initial-value:56px}
.fp-peel{--pl:56px;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:4px;top:4px;width:42px;height:40px;display:block;
.pl-hole img{position:absolute;right:4px;top:4px;width:31px;height:30px;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}
.pl-t{position:absolute;left:33.3%;top:66.7%;transform:translate(-50%,-50%) rotate(45deg);font-size:9.5px;font-weight:800;letter-spacing:1px;line-height:1;white-space:nowrap;color:#C2503E;pointer-events:none}
.fp-peel:active{opacity:.7}
@keyframes plLift{0%,82%,100%{--pl:76px}89%{--pl:82px}95%{--pl:77px}}
@keyframes plLift{0%,82%,100%{--pl:56px}89%{--pl:60px}95%{--pl:57px}}
@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}}