祈福小树改为藏在工具卡后面、只从卡片上沿露出树冠 (v26100443)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
26
mama-box.css
26
mama-box.css
@@ -4663,21 +4663,23 @@ a.skip:focus{left:16px;top:16px}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ============ 祈福树入口(2026-10-05) ============
|
||||
用户:「把『所有工具』取消,右上角放『祈福』两个小字,树在右上角露出一点点,偶尔会动一动」。
|
||||
用户:「把『所有工具』取消,右上角放『祈福』两个小字」+「树藏在页面底部边缘,微微露出来,偶尔动一动」。
|
||||
· 树图用宝宝祈福会话提供的缩略图(/qifu-shu/static/tree-thumb.png,600² 裁边后缩到 150px 存本地,免得每次拉 550KB);
|
||||
· 小树贴在工具卡右上角,右边和顶上各有一截被卡片圆角 / 边线裁掉(.tool-dock 本来就 overflow:hidden),像从卡片外探进来;
|
||||
· 「祈福」小字在树左边,和标题同一行;整块都是点击区(≥44px 高);
|
||||
· 「偶尔动一动」:每 7 秒里前 6 秒静止,最后 1 秒绕树根轻轻摆 3 度左右再回正,不抢眼。 */
|
||||
.tool-dock{position:relative}
|
||||
.dock-head{position:relative}
|
||||
.dock-qifu{margin-left:auto;align-self:stretch;display:flex;align-items:center;gap:2px;
|
||||
padding:0 46px 0 10px;margin-right:-16px;min-height:44px;margin-top:-10px;margin-bottom:-10px;
|
||||
· 树放在头图(.home-hero,overflow:hidden)右下角:#homeBody 的 z-index 比头图高,工具卡上沿(≈231px)盖住树的下半截,
|
||||
只露树冠顶 ≈17px(卡片停稳后上沿 236px,树顶 219px);被盖住那截透过卡片毛玻璃是一团模糊的绿,像树藏在玻璃后面;
|
||||
· 「祈福」小字在卡片标题行右边(原「所有工具」的位置),正好在树下方;两处都能点(≥44px 高的点击区);
|
||||
· 「偶尔动一动」:每 7 秒里前 6 秒静止,最后 1 秒绕树根轻轻摆 3 度左右再回正。 */
|
||||
.dock-qifu{margin-left:auto;align-self:stretch;display:flex;align-items:center;
|
||||
padding:0 2px 0 14px;min-height:44px;margin-top:-10px;margin-bottom:-10px;
|
||||
text-decoration:none;-webkit-tap-highlight-color:transparent}
|
||||
.dock-qifu .dq-t{font-size:12px;font-weight:700;color:#C2503E;letter-spacing:1px}
|
||||
.dock-qifu .dq-tree{position:absolute;right:-12px;top:-15px;width:46px;height:44px;
|
||||
transform-origin:50% 100%;animation:dqSway 7s ease-in-out infinite;
|
||||
filter:drop-shadow(0 1.5px 2px rgba(60,40,20,.22));pointer-events:none}
|
||||
.dock-qifu:active{opacity:.6}
|
||||
.hero-qifu{position:absolute;z-index:1;right:4px;bottom:-1px;width:58px;height:44px;display:block;
|
||||
-webkit-tap-highlight-color:transparent}
|
||||
.hero-qifu img{position:absolute;left:0;top:0;width:58px;height:56px;display:block;
|
||||
transform-origin:50% 100%;animation:dqSway 7s ease-in-out infinite;
|
||||
filter:drop-shadow(0 -1px 3px rgba(80,30,10,.25))}
|
||||
@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){.dock-qifu .dq-tree{animation:none}}
|
||||
@media (prefers-reduced-motion:reduce){.hero-qifu img{animation:none}}
|
||||
|
||||
Reference in New Issue
Block a user