From 5f62d32ba263772dbeb8894772a96c54c4fb35a5 Mon Sep 17 00:00:00 2001 From: Karlcarlo Date: Mon, 5 Oct 2026 02:51:43 +0000 Subject: [PATCH] =?UTF-8?q?=E4=BB=8A=E6=97=A5=E8=84=9A=E5=8D=B0=E6=8E=80?= =?UTF-8?q?=E8=A7=92=E6=94=BE=E5=A4=A7=E9=9C=B2=E5=87=BA=E6=95=B4=E6=A3=B5?= =?UTF-8?q?=E7=A5=88=E7=A6=8F=E6=A0=91=EF=BC=8C=E7=BA=B8=E8=83=8C=E5=8A=A0?= =?UTF-8?q?=E3=80=8C=E7=A5=88=E7=A6=8F=E3=80=8D(v26100449)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- index.html | 4 ++-- js/app.js | 2 +- mama-box.css | 19 +++++++++++-------- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 83dedd0..f391ad0 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -410,7 +410,7 @@ - + 祈福
diff --git a/js/app.js b/js/app.js index c591234..0bcf9d2 100644 --- a/js/app.js +++ b/js/app.js @@ -3,7 +3,7 @@ (function () { 'use strict'; /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */ - var VER = '26100448'; + var VER = '26100449'; const $ = (s, c) => (c || document).querySelector(s); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); diff --git a/mama-box.css b/mama-box.css index ef55215..abb69ad 100644 --- a/mama-box.css +++ b/mama-box.css @@ -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:"";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:"";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}}