lq/hunli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 升级了一些视觉、各种单图相册效果、日历效果、多种模板任选

Browse Source
This commit is contained in:
年糕崽崽
2026-08-14 21:02:24 +08:00
parent 5e609d5ee4
commit 1914dad39a
22 changed files with 6929 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
vite-tailwindcss/src/styles/frames.css
View File

@@ -127,20 +127,24 @@
:where(.gf-postcard, .gf-film, .gf-stamp, .gf-arch, .gf-oval, .gf-circle, .gf-leaf,
.gf-heart, .gf-flower, .gf-hexagon, .gf-scallop, .gf-wave, .gf-zigzag,
.gf-torn, .gf-ticket, .gf-bevel,
.gf-wreath, .gf-baroque, .gf-fan, .gf-moonwin, .gf-ribbon,
.gf-cloud, .gf-mist, .gf-bloom, .gf-panorama, .gf-ovalwide) {
position: relative;
}
/* 边缘渐隐内晕：照片边缘向纸色柔和过渡，与边框/裁切形状融为一体
（mask/clip 类的伪元素会随形状一并裁切，晕自动贴合轮廓） */
/* 边缘渐隐内晕：照片边缘向页面纸色柔和过渡，与边框/裁切形状融为一体
（mask/clip 类的伪元素会随形状一并裁切，晕自动贴合轮廓；
颜色用 color-mix 跟随主题纸色，深浅主题都能融入页面） */
.gf-heart::after, .gf-flower::after, .gf-scallop::after, .gf-wave::after,
.gf-zigzag::after, .gf-torn::after, .gf-stamp::after, .gf-ticket::after,
.gf-hexagon::after, .gf-bevel::after, .gf-arch::after, .gf-oval::after,
.gf-circle::after, .gf-leaf::after, .gf-cloud::after, .gf-ovalwide::after {
.gf-circle::after, .gf-leaf::after, .gf-cloud::after, .gf-ovalwide::after,
.gf-wreath::after, .gf-baroque::after, .gf-fan::after, .gf-moonwin::after,
.gf-ribbon::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 62% 62% at 50% 50%, rgba(255, 252, 246, 0) 55%, rgba(255, 252, 246, 0.48) 100%);
background: radial-gradient(ellipse 64% 64% at 50% 50%, transparent 50%, color-mix(in srgb, var(--c-paper, #fffcf6) 62%, transparent) 100%);
pointer-events: none;
}
@@ -205,39 +209,143 @@
pointer-events: none;
}
/* 拱门（顶部全圆，婚礼穹顶造型） */
.gf-arch {
padding: 8px;
border: 1px solid rgba(201, 169, 120, 0.5);
border-radius: 999px 999px 14px 14px;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.65), 0 14px 32px rgba(120, 90, 60, 0.16);
background: #fff;
}
.gf-arch > img {
border-radius: 992px 992px 8px 8px;
}
/* 拱顶花饰圆章（呼应尾页门框 keystone） */
.gf-arch::before {
content: '❀';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 26px;
height: 26px;
/* 花环相框（月桂双枝环抱椭圆照片，arch 为历史别名） */
.gf-arch,
.gf-wreath {
padding: 22px;
border: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
color: #b08e63;
background: rgba(253, 251, 247, 0.92);
box-shadow: 0 0 0 1px rgba(201, 169, 120, 0.45), 0 2px 6px rgba(120, 90, 60, 0.18);
box-shadow: none;
background: transparent;
}
.gf-arch > img,
.gf-wreath > img {
border-radius: 50%;
}
.gf-arch::before,
.gf-wreath::before {
content: '';
position: absolute;
inset: -4px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250'%3E%3Cg fill='none' stroke='%238a9a76' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M104 240C48 230 16 178 20 112 22 70 38 38 66 18'/%3E%3Cpath d='M96 240c56-10 88-62 84-128-2-42-18-74-46-94'/%3E%3C/g%3E%3Cg fill='%239ab48a'%3E%3Cellipse cx='34' cy='196' rx='11' ry='4.6' transform='rotate(38 34 196)'/%3E%3Cellipse cx='23' cy='164' rx='11' ry='4.6' transform='rotate(64 23 164)'/%3E%3Cellipse cx='19' cy='128' rx='11' ry='4.6' transform='rotate(82 19 128)'/%3E%3Cellipse cx='24' cy='92' rx='11' ry='4.6' transform='rotate(102 24 92)'/%3E%3Cellipse cx='38' cy='56' rx='11' ry='4.6' transform='rotate(124 38 56)'/%3E%3Cellipse cx='60' cy='30' rx='11' ry='4.6' transform='rotate(146 60 30)'/%3E%3Cellipse cx='166' cy='196' rx='11' ry='4.6' transform='rotate(-38 166 196)'/%3E%3Cellipse cx='177' cy='164' rx='11' ry='4.6' transform='rotate(-64 177 164)'/%3E%3Cellipse cx='181' cy='128' rx='11' ry='4.6' transform='rotate(-82 181 128)'/%3E%3Cellipse cx='176' cy='92' rx='11' ry='4.6' transform='rotate(-102 176 92)'/%3E%3Cellipse cx='162' cy='56' rx='11' ry='4.6' transform='rotate(-124 162 56)'/%3E%3Cellipse cx='140' cy='30' rx='11' ry='4.6' transform='rotate(-146 140 30)'/%3E%3C/g%3E%3Cg fill='%23b8cba6' opacity='.85'%3E%3Cellipse cx='46' cy='222' rx='9' ry='3.8' transform='rotate(22 46 222)'/%3E%3Cellipse cx='154' cy='222' rx='9' ry='3.8' transform='rotate(-22 154 222)'/%3E%3Cellipse cx='84' cy='10' rx='9' ry='3.8' transform='rotate(168 84 10)'/%3E%3Cellipse cx='116' cy='10' rx='9' ry='3.8' transform='rotate(12 116 10)'/%3E%3C/g%3E%3Cg fill='%23e4aeb6'%3E%3Cg transform='translate(100 244)'%3E%3Ccircle cx='0' cy='-4' r='3.4'/%3E%3Ccircle cx='3.8' cy='1.4' r='3.4'/%3E%3Ccircle cx='-3.8' cy='1.4' r='3.4'/%3E%3Ccircle r='1.8' fill='%23c9a24a'/%3E%3C/g%3E%3Cg transform='translate(30 40) scale(.8)'%3E%3Ccircle cx='0' cy='-4' r='3.4'/%3E%3Ccircle cx='3.8' cy='1.4' r='3.4'/%3E%3Ccircle cx='-3.8' cy='1.4' r='3.4'/%3E%3Ccircle r='1.8' fill='%23c9a24a'/%3E%3C/g%3E%3Cg transform='translate(170 40) scale(.8)'%3E%3Ccircle cx='0' cy='-4' r='3.4'/%3E%3Ccircle cx='3.8' cy='1.4' r='3.4'/%3E%3Ccircle cx='-3.8' cy='1.4' r='3.4'/%3E%3Ccircle r='1.8' fill='%23c9a24a'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23d98a9e' opacity='.7'%3E%3Ccircle cx='52' cy='210' r='2.6'/%3E%3Ccircle cx='148' cy='210' r='2.6'/%3E%3Ccircle cx='26' cy='76' r='2.4'/%3E%3Ccircle cx='174' cy='76' r='2.4'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
pointer-events: none;
z-index: 1;
}
/* 巴洛克金镜（凡尔赛宫廷椭圆镜：金渐变边 + 顶部卷草冠饰） */
.gf-baroque {
padding: 9px;
border: 3.5px solid transparent;
border-radius: 50%;
background:
linear-gradient(180deg, #fffdf8, #fbf4e6) padding-box,
linear-gradient(140deg, #ead7aa 0%, #b08d54 26%, #f6ecd0 48%, #a8834a 72%, #e2cb98 100%) border-box;
box-shadow:
0 0 0 1px rgba(140, 108, 60, 0.5),
0 0 0 6px rgba(246, 236, 208, 0.55),
0 0 0 7.5px rgba(176, 141, 84, 0.5),
0 16px 36px rgba(120, 90, 50, 0.22);
}
.gf-baroque > img {
border-radius: 50%;
}
.gf-baroque::before {
content: '';
position: absolute;
top: -21px;
left: 50%;
transform: translateX(-50%);
width: 84px;
height: 26px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 26'%3E%3Cg fill='none' stroke='%23b08d54' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M42 22c-6-2-8-7-5-11 2.6-3.4 7-2.4 7 1 0 2.6-2.6 3.4-4 1.6'/%3E%3Cpath d='M42 22c6-2 8-7 5-11-2.6-3.4-7-2.4-7 1 0 2.6 2.6 3.4 4 1.6'/%3E%3Cpath d='M30 21C20 19 14 13 16 7c4 2 8 6 10 11'/%3E%3Cpath d='M54 21c10-2 16-8 14-14-4 2-8 6-10 11'/%3E%3Cpath d='M14 8C10 6 6 6 3 9c3 2 6 2 9 1'/%3E%3Cpath d='M70 8c4-2 8-2 11 1-3 2-6 2-9 1'/%3E%3C/g%3E%3Ccircle cx='42' cy='6' r='2.6' fill='%23c9a24a'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
z-index: 1;
}
/* 折扇扇面（底心圆点展开的扇形：clip 扇角 ∩ mask 环带，附扇骨放射线）
环带 mask 内外缘放宽渐变即自带羽化，clip 斜边与顶边由 ::after 贴边雾软化 */
.gf-fan {
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
clip-path: polygon(50% 126%, -14% -6%, 114% -6%);
-webkit-clip-path: polygon(50% 126%, -14% -6%, 114% -6%);
-webkit-mask: radial-gradient(146% 146% at 50% 126%, transparent 27%, #000 33%, #000 93%, transparent 98.5%);
mask: radial-gradient(146% 146% at 50% 126%, transparent 27%, #000 33%, #000 93%, transparent 98.5%);
}
/* 扇骨：自底心放射的细白线 + 弧沿描边 */
.gf-fan::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-conic-gradient(from -57deg at 50% 126%, rgba(255, 253, 246, 0.6) 0 0.5deg, transparent 0.5deg 16.2deg),
radial-gradient(146% 146% at 50% 126%, transparent 91%, rgba(190, 155, 105, 0.45) 92.5%, rgba(190, 155, 105, 0.45) 95%, transparent 96.5%),
radial-gradient(146% 146% at 50% 126%, transparent 30%, rgba(190, 155, 105, 0.4) 31.5%, rgba(190, 155, 105, 0.4) 34%, transparent 35.5%);
pointer-events: none;
z-index: 1;
}
/* 扇面贴边雾：顶边下坠 + 左右斜边 + 内弧收口（覆盖通用椭圆晕，全部贴合扇形轮廓） */
.gf-fan::after {
background:
linear-gradient(180deg, color-mix(in srgb, var(--c-paper, #fffcf6) 78%, transparent), transparent 15%),
linear-gradient(68deg, color-mix(in srgb, var(--c-paper, #fffcf6) 72%, transparent), transparent 26%),
linear-gradient(292deg, color-mix(in srgb, var(--c-paper, #fffcf6) 72%, transparent), transparent 26%),
radial-gradient(146% 146% at 50% 126%, transparent 28%, color-mix(in srgb, var(--c-paper, #fffcf6) 55%, transparent) 34%, transparent 42%);
}
/* 月洞圆窗（正圆开窗 + 双环窗线 + 右上探入梅枝） */
.gf-moonwin {
padding: 9px;
border: 0;
border-radius: 50%;
box-shadow: none;
background: transparent;
}
.gf-moonwin > img {
border-radius: 50%;
}
.gf-moonwin::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid rgba(110, 120, 105, 0.6);
box-shadow:
inset 0 0 0 4px rgba(255, 255, 255, 0.6),
inset 0 0 0 5px rgba(110, 120, 105, 0.35);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%236e7869' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M96 22C84 30 72 34 58 34'/%3E%3Cpath d='M84 27c-2-5-1-9 3-12'/%3E%3Cpath d='M70 32c-1-4 0-7 3-9'/%3E%3C/g%3E%3Cg fill='%23d9a0a5'%3E%3Ccircle cx='80' cy='24' r='2.6'/%3E%3Ccircle cx='68' cy='30' r='2.2'/%3E%3Ccircle cx='58' cy='33' r='1.8'/%3E%3C/g%3E%3Ccircle cx='74' cy='21' r='1.2' fill='%23c9a24a'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
pointer-events: none;
z-index: 1;
}
/* 蝴蝶结缎带框（顶部系结垂带的礼物相框） */
.gf-ribbon {
padding: 13px 11px 11px;
border: 1px solid rgba(217, 160, 165, 0.55);
border-radius: 12px;
background: linear-gradient(180deg, #fffafa, #fdf1f3);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7), 0 12px 28px rgba(190, 120, 130, 0.18);
}
.gf-ribbon > img {
border-radius: 7px;
}
.gf-ribbon::before {
content: '';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 66px;
height: 44px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 44'%3E%3Cg fill='%23e093a3'%3E%3Cpath d='M33 12C26 4 14 2 8 8c-5 5-3 13 4 15 8 2 17-4 21-11z' fill='%23e8a8b2'/%3E%3Cpath d='M33 12c7-8 19-10 25-4 5 5 3 13-4 15-8 2-17-4-21-11z' fill='%23e8a8b2'/%3E%3Cpath d='M33 12C28 7 20 6 16 10c-3 3-2 8 2 9 6 2 12-2 15-7z' fill='%23f2c4cc' opacity='.9'/%3E%3Cpath d='M33 12c5-5 13-6 17-2 3 3 2 8-2 9-6 2-12-2-15-7z' fill='%23f2c4cc' opacity='.9'/%3E%3Cpath d='M27 20l-7 20 8-3 3 5 4-22z' fill='%23e8a8b2'/%3E%3Cpath d='M39 20l7 20-8-3-3 5-4-22z' fill='%23dfa0aa'/%3E%3Ccircle cx='33' cy='13' r='5' fill='%23d9899a'/%3E%3Ccircle cx='33' cy='13' r='2.2' fill='%23f2c4cc'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
filter: drop-shadow(0 3px 5px rgba(190, 120, 130, 0.3));
pointer-events: none;
z-index: 2;
}
/* 椭圆相框 */
.gf-oval {
padding: 7px;
@@ -305,6 +413,16 @@
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* 六向贴形边雾：每条边各一道向内渐隐，取代不贴形的通用椭圆晕 */
.gf-hexagon::after {
background:
linear-gradient(210deg, color-mix(in srgb, var(--c-paper, #fffcf6) 62%, transparent), transparent 17%),
linear-gradient(270deg, color-mix(in srgb, var(--c-paper, #fffcf6) 62%, transparent), transparent 17%),
linear-gradient(330deg, color-mix(in srgb, var(--c-paper, #fffcf6) 62%, transparent), transparent 17%),
linear-gradient(30deg, color-mix(in srgb, var(--c-paper, #fffcf6) 62%, transparent), transparent 17%),
linear-gradient(90deg, color-mix(in srgb, var(--c-paper, #fffcf6) 62%, transparent), transparent 17%),
linear-gradient(150deg, color-mix(in srgb, var(--c-paper, #fffcf6) 62%, transparent), transparent 17%);
}
/* 八瓣花（多层 radial mask 合成花形，推荐 1:1） */
.gf-flower {
@@ -313,35 +431,35 @@
border-radius: 0;
box-shadow: none;
-webkit-mask:
radial-gradient(19% 19% at 50% 19%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 71.9% 28.1%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 81% 50%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 71.9% 71.9%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 50% 81%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 28.1% 71.9%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 19% 50%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 28.1% 28.1%, #000 98%, #0000 100%),
radial-gradient(34% 34% at 50% 50%, #000 98%, #0000 100%);
radial-gradient(19% 19% at 50% 19%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 71.9% 28.1%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 81% 50%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 71.9% 71.9%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 50% 81%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 28.1% 71.9%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 19% 50%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 28.1% 28.1%, #000 68%, #0000 99%),
radial-gradient(34% 34% at 50% 50%, #000 82%, #0000 100%);
mask:
radial-gradient(19% 19% at 50% 19%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 71.9% 28.1%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 81% 50%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 71.9% 71.9%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 50% 81%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 28.1% 71.9%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 19% 50%, #000 98%, #0000 100%),
radial-gradient(19% 19% at 28.1% 28.1%, #000 98%, #0000 100%),
radial-gradient(34% 34% at 50% 50%, #000 98%, #0000 100%);
radial-gradient(19% 19% at 50% 19%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 71.9% 28.1%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 81% 50%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 71.9% 71.9%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 50% 81%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 28.1% 71.9%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 19% 50%, #000 68%, #0000 99%),
radial-gradient(19% 19% at 28.1% 28.1%, #000 68%, #0000 99%),
radial-gradient(34% 34% at 50% 50%, #000 82%, #0000 100%);
}
/* 心形（SVG mask 裁切，推荐 1:1） */
/* 心形（SVG mask 裁切 + 内嵌高斯模糊羽化边，推荐 1:1） */
.gf-heart {
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23f)' fill='%23000' d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23f)' fill='%23000' d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
}
/* 扇贝花边（四边外凸圆弧波浪） */
@@ -541,12 +659,12 @@
box-shadow: none;
background: #fff;
-webkit-mask:
radial-gradient(var(--gf-c), #000 98%, #0000) 0 0 / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
radial-gradient(calc(0.68 * var(--gf-c)), #000 98%, #0000) calc(1.7 * var(--gf-c)) calc(1.7 * var(--gf-c)) / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
radial-gradient(var(--gf-c), #000 62%, #0000 99%) 0 0 / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
radial-gradient(calc(0.68 * var(--gf-c)), #000 62%, #0000 99%) calc(1.7 * var(--gf-c)) calc(1.7 * var(--gf-c)) / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
linear-gradient(#000 0 0) 50% / calc(100% - 2.4 * var(--gf-c)) calc(100% - 2.4 * var(--gf-c)) no-repeat;
mask:
radial-gradient(var(--gf-c), #000 98%, #0000) 0 0 / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
radial-gradient(calc(0.68 * var(--gf-c)), #000 98%, #0000) calc(1.7 * var(--gf-c)) calc(1.7 * var(--gf-c)) / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
radial-gradient(var(--gf-c), #000 62%, #0000 99%) 0 0 / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
radial-gradient(calc(0.68 * var(--gf-c)), #000 62%, #0000 99%) calc(1.7 * var(--gf-c)) calc(1.7 * var(--gf-c)) / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
linear-gradient(#000 0 0) 50% / calc(100% - 2.4 * var(--gf-c)) calc(100% - 2.4 * var(--gf-c)) no-repeat;
}
/* 右上飘着的小云 */
@@ -692,9 +810,45 @@
z-index: 1;
}
/* 异形裁切类的投影：mask 会裁掉 box-shadow，由父级 drop-shadow 跟随轮廓补投影 */
/* ———— 云雾加持：拱门/椭圆/云朵边缘的飘动雾层 ————
覆盖上方通用渐隐层：顶部柔光 + 两团缓慢漂移的白雾 + 底部升雾 + 周缘主题色淡晕。
雾团层带显式 background-size，靠 background-position 关键帧漂移。 */
.gf-arch::after,
.gf-wreath::after,
.gf-moonwin::after,
.gf-oval::after,
.gf-ovalwide::after,
.gf-cloud::after {
background:
radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.32), transparent 46%) 50% 0 / 100% 100%,
radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.5), transparent 72%) 8% 96% / 64% 34%,
radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.4), transparent 74%) 92% 99% / 56% 28%,
linear-gradient(0deg, color-mix(in srgb, var(--c-paper, #fffcf6) 58%, transparent), transparent 30%) 0 0 / 100% 100%,
radial-gradient(ellipse 72% 72% at 50% 46%, transparent 56%, color-mix(in srgb, var(--c-paper, #fffcf6) 46%, transparent) 100%) 0 0 / 100% 100%;
background-repeat: no-repeat;
animation: gfFogDrift 15s ease-in-out infinite alternate;
}
@keyframes gfFogDrift {
from {
background-position: 50% 0, 0% 96%, 100% 99%, 0 0, 0 0;
}
to {
background-position: 50% 0, 34% 90%, 64% 96%, 0 0, 0 0;
}
}
/* 晨雾框的底部双雾团：缓慢涌动 */
.gf-mist::before {
animation: gfMistSway 11s ease-in-out infinite alternate;
}
@keyframes gfMistSway {
from { transform: translateX(-7px) scaleY(1); }
to { transform: translateX(7px) scaleY(1.12); }
}
/* 异形裁切类的投影：mask 会裁掉 box-shadow，由父级 drop-shadow 跟随轮廓补投影
（投影刻意压淡：裁切形状靠边缘虚化融入页面，重阴影会显得生硬） */
.gf-shape-shadow {
filter: drop-shadow(0 10px 18px rgba(96, 72, 50, 0.22));
filter: drop-shadow(0 6px 12px rgba(96, 72, 50, 0.12));
}
/* 辅助：图片保持原始宽高比（单图铺满+保比例时使用，覆盖 gf-frame 的 height:100%） */