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

首页悄悄话入口：条内四角星一闪一闪 + 偶尔两道流星划过 (v26100178)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-02 08:14:05 +00:00
parent 6af3d5e80c
commit 16f3b77841
3 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100177 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100178 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -301,6 +301,8 @@
点进去是整个悄悄话的大页面，设计炫酷一点、有创意、视觉有冲击力」）：
首页只留一条入口（一句轮播的悄悄话 + 条数），横滑纸条带挪进全屏页 #whPage。 -->
<button class="wh-entry hide" id="whWall" type="button" aria-label="打开同孕周悄悄话">
<!-- 2026-10-02 用户：「入口那一小条里要有星空，星星一闪一闪，再划过几个流星，不要太多」 -->
<span class="we-sky" aria-hidden="true"><i class="tw" style="left:21%;top:27%;width:9px;height:9px;animation-delay:-3.4s;animation-duration:2.1s"></i><i class="tw" style="left:33%;top:24%;width:5px;height:5px;animation-delay:-1.2s;animation-duration:2.0s"></i><i class="tw" style="left:44%;top:32%;width:4px;height:4px;animation-delay:-1.6s;animation-duration:2.6s"></i><i style="left:53%;top:30%;width:4px;height:4px;animation-delay:-0.3s;animation-duration:1.9s"></i><i class="tw" style="left:64%;top:28%;width:9px;height:9px;animation-delay:-2.4s;animation-duration:2.2s"></i><i style="left:70%;top:18%;width:4px;height:4px;animation-delay:-1.8s;animation-duration:2.3s"></i><i style="left:85%;top:42%;width:4px;height:4px;animation-delay:-1.3s;animation-duration:2.2s"></i><i class="tw" style="left:90%;top:10%;width:4px;height:4px;animation-delay:-3.4s;animation-duration:2.5s"></i><i class="tw" style="left:24%;top:87%;width:4px;height:4px;animation-delay:-3.7s;animation-duration:1.9s"></i><i class="tw" style="left:30%;top:82%;width:8px;height:8px;animation-delay:-2.5s;animation-duration:3.2s"></i><i class="tw" style="left:40%;top:61%;width:7px;height:7px;animation-delay:-1.6s;animation-duration:3.5s"></i><i class="tw" style="left:49%;top:82%;width:4px;height:4px;animation-delay:-3.2s;animation-duration:2.1s"></i><i style="left:62%;top:73%;width:5px;height:5px;animation-delay:-3.1s;animation-duration:2.6s"></i><i class="tw" style="left:71%;top:71%;width:5px;height:5px;animation-delay:-3.5s;animation-duration:3.6s"></i><i class="tw" style="left:82%;top:92%;width:4px;height:4px;animation-delay:-1.6s;animation-duration:3.3s"></i><i class="tw" style="left:93%;top:61%;width:5px;height:5px;animation-delay:-1.0s;animation-duration:3.2s"></i><b class="we-mt"></b><b class="we-mt m2"></b></span>
<span class="we-ico" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 18.5V7.8A2.8 2.8 0 017.8 5h8.4A2.8 2.8 0 0119 7.8v5.4a2.8 2.8 0 01-2.8 2.8H9.2z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M9 10.5h6" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg></span>
<span class="we-txt"><b>同孕周悄悄话</b><span class="we-roll" id="weRoll"></span></span>
<span class="we-go" id="weGo"></span>

2
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100177';
var VER = '26100178';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

20
mama-box.css
View File

@@ -4033,3 +4033,23 @@ a.skip:focus{left:16px;top:16px}
/* 十二改：白光集中在头后一小段，字所在的尾巴段光变柔，小字不再被白光吃掉 */
.wmt-l::before{background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.7) 8%,rgba(255,255,255,.32) 22%,rgba(240,230,255,.22) 55%,rgba(255,255,255,.06) 90%,transparent)}
.wmt.mine .wmt-l::before{background:linear-gradient(90deg,#FFF8EA 0,rgba(255,236,200,.7) 8%,rgba(255,226,180,.32) 22%,rgba(255,210,150,.22) 55%,rgba(255,220,170,.06) 90%,transparent)}
/* 首页悄悄话入口：条内一片小星空（四角星一闪一闪）+ 偶尔两道流星，频率很低 */
.wh-entry::before{display:none}
.we-ico,.we-txt,.we-go{position:relative;z-index:1}
.we-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.we-sky i{position:absolute;margin:-3px 0 0 -3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF4E6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFF4E6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.75}
.we-sky i.tw{animation:weTw 2.6s ease-in-out infinite}
@keyframes weTw{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:.15;transform:scale(.5)}}
.we-mt{position:absolute;top:-6px;left:62%;width:70px;height:1.5px;border-radius:2px;opacity:0;transform-origin:0 50%;
background:linear-gradient(90deg,#fff,rgba(255,255,255,.5) 30%,rgba(255,255,255,0));box-shadow:0 0 6px rgba(255,255,255,.7);
animation:weMt 7s linear infinite 1.5s}
.we-mt::before{content:"";position:absolute;left:-2px;top:-1.5px;width:5px;height:4.5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #fff}
.we-mt.m2{left:92%;width:54px;animation-duration:11s;animation-delay:5.2s}
@keyframes weMt{0%{opacity:0;transform:translate(0,0) rotate(-24deg)}1.5%{opacity:1}9%{opacity:0;transform:translate(-150px,68px) rotate(-24deg)}100%{opacity:0;transform:translate(-150px,68px) rotate(-24deg)}}
@media (prefers-reduced-motion:reduce){.we-sky i.tw,.we-mt{animation:none}}
.we-sky i{opacity:.95;filter:drop-shadow(0 0 2px rgba(255,255,255,.8));transform:scale(1.35)}
@keyframes weTw{0%,100%{opacity:1;transform:scale(1.35)}50%{opacity:.2;transform:scale(.6)}}
.we-mt{width:96px;height:2px;top:-4px}
.we-mt.m2{width:70px}
.we-mt{height:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.75) 30%,rgba(255,255,255,0));box-shadow:0 0 8px 1px rgba(255,255,255,.8)}