更新页面效果
This commit is contained in:
李琦
BIN
hunliji-api/hl-api
Normal file
BIN
hunliji-api/hl-api
Normal file
Binary file not shown.
@@ -111,7 +111,7 @@ func requireAdmin(c *gin.Context) bool {
|
||||
}
|
||||
|
||||
func initDB() {
|
||||
dsn := "root:root@tcp(127.0.0.1:3306)/nl_wedding?charset=utf8mb4&parseTime=True&loc=Local"
|
||||
dsn := "root:mysql_PKC65h@tcp(127.0.0.1:3306)/nl_wedding?charset=utf8mb4&parseTime=True&loc=Local"
|
||||
var err error
|
||||
db, err = gorm.Open(mysql.Open(dsn), &gorm.Config{})
|
||||
if err != nil {
|
||||
@@ -433,6 +433,6 @@ func main() {
|
||||
})
|
||||
}
|
||||
|
||||
fmt.Println("婚礼纪后端 API 已在 http://localhost:8080 启动")
|
||||
r.Run(":8080")
|
||||
fmt.Println("婚礼纪后端 API 已在 http://localhost:15201 启动")
|
||||
r.Run(":15201")
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>婚礼请柬 · Wedding Invitation</title>
|
||||
<script type="module" crossorigin src="/assets/index-BLDegpD4.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CiAU64yc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
vite-tailwindcss/dist.zip
Normal file
BIN
vite-tailwindcss/dist.zip
Normal file
Binary file not shown.
@@ -1,10 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>婚礼请柬 · Wedding Invitation</title>
|
||||
<meta name="description" content="我们将在2026年9月4日举行婚礼，诚挚邀请你前来" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="李琦&李逸烁的婚礼请柬" />
|
||||
<meta property="og:description" content="我们将在2026年9月4日举行婚礼，诚挚邀请你前来" />
|
||||
<meta name="twitter:title" content="李琦&李逸烁的婚礼请柬" />
|
||||
<meta name="twitter:description" content="我们将在2026年9月4日举行婚礼，诚挚邀请你前来" />
|
||||
<title>李琦&李逸烁的婚礼请柬</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -151,9 +151,31 @@
|
||||
>
|
||||
<span v-if="day" class="calendar-day-num">{{ day }}</span>
|
||||
<span v-if="day === weddingDay" class="heart-ring" aria-hidden="true">
|
||||
<svg viewBox="0 0 64 58" role="img">
|
||||
<path class="heart-brush heart-brush-shadow" d="M32 51 C17 39 8 30 8 19 C8 10 15 6 22 8 C27 9 30 13 32 17 C34 13 38 9 43 8 C51 7 57 12 57 21 C57 32 47 41 32 51 Z" />
|
||||
<path class="heart-brush heart-brush-main" d="M32 51 C17 39 8 30 8 19 C8 10 15 6 22 8 C27 9 30 13 32 17 C34 13 38 9 43 8 C51 7 57 12 57 21 C57 32 47 41 32 51 Z" />
|
||||
<svg viewBox="0 0 120 96" role="img">
|
||||
<defs>
|
||||
<filter id="calendar-heart-rough" x="-18%" y="-18%" width="136%" height="136%">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.045" numOctaves="3" seed="11" result="noise" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2.8" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#calendar-heart-rough)">
|
||||
<path class="heart-brush heart-brush-shadow" d="M54 82 C31 70 12 50 13 29 C14 10 35 7 49 27 C56 37 58 49 59 56 C64 37 80 10 99 20 C113 28 105 51 90 66 C80 76 70 81 64 83" />
|
||||
<path class="heart-brush heart-brush-main" d="M54 82 C31 70 12 50 13 29 C14 10 35 7 49 27 C56 37 58 49 59 56 C64 37 80 10 99 20 C113 28 105 51 90 66 C80 76 70 81 64 83" />
|
||||
<path class="heart-brush heart-brush-tail" d="M94 61 C87 62 82 58 78 52" />
|
||||
</g>
|
||||
<g class="heart-brush-cuts">
|
||||
<path d="M24 28 C34 15 45 23 51 39" />
|
||||
<path d="M70 43 C78 25 91 22 101 30" />
|
||||
<path d="M28 48 C39 59 47 65 55 70" />
|
||||
<path d="M78 68 C86 64 94 57 98 49" />
|
||||
</g>
|
||||
<g class="heart-brush-speckles">
|
||||
<circle cx="14" cy="44" r="1.9" />
|
||||
<circle cx="22" cy="19" r="1.2" />
|
||||
<circle cx="101" cy="22" r="1.8" />
|
||||
<circle cx="109" cy="48" r="1.4" />
|
||||
<circle cx="74" cy="77" r="1.2" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
@@ -167,22 +189,22 @@
|
||||
</div>
|
||||
|
||||
<!-- 婚礼流程 -->
|
||||
<div class="page-section bg-transparent px-6 z-10 justify-center relative" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
|
||||
<div class="absolute inset-0 bg-[#Fdfbf7]/60 backdrop-blur-[2px] -z-10"></div>
|
||||
<div v-reveal="'up'" class="text-center mb-14">
|
||||
<span class="schedule-title text-2xl text-[#a88c6b] tracking-[0.3em] font-light block">婚礼流程</span>
|
||||
<span class="schedule-kicker text-[10px] text-[#8A8680] font-sans uppercase tracking-[0.4em] mt-3 block">Wedding Schedule</span>
|
||||
<div class="page-section schedule-page px-6 z-10 justify-center relative" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
|
||||
<div v-reveal="'up'" class="schedule-heading">
|
||||
<span class="schedule-title">婚礼流程</span>
|
||||
<span class="schedule-kicker">Wedding Schedule</span>
|
||||
</div>
|
||||
<div class="relative w-full px-2 max-w-[340px] mx-auto">
|
||||
<div class="absolute left-1/2 top-2 bottom-4 w-[0.5px] bg-[#a88c6b]/40 -translate-x-1/2"></div>
|
||||
<div v-for="(item, index) in data.schedule" :key="index" class="flex w-full mb-10 relative z-10" :class="index % 2 === 0 ? 'justify-start' : 'justify-end'">
|
||||
<div v-reveal="{ variant: index % 2 === 0 ? 'left' : 'right', delay: index * 120 }"
|
||||
class="w-[45%] flex flex-col relative bg-white/60 p-4 rounded-xl shadow-sm border-[0.5px] border-[#a88c6b]/10"
|
||||
:class="index % 2 === 0 ? 'text-right items-end' : 'text-left items-start'">
|
||||
<div class="absolute top-[22px] w-2 h-2 rounded-full bg-[#a88c6b] shadow-[0_0_0_4px_rgba(168,140,107,0.15)]" :class="index % 2 === 0 ? '-right-[28px]' : '-left-[28px]'"></div>
|
||||
<span class="text-xl font-serif text-[#a88c6b] mb-1 font-light tracking-wider">{{ item.time }}</span>
|
||||
<span class="text-[13px] tracking-[0.2em] text-[#3a3a3a] font-medium mb-1">{{ item.event }}</span>
|
||||
<span class="text-[9px] tracking-[0.1em] text-[#8A8680] font-sans uppercase">{{ item.desc }}</span>
|
||||
<div class="schedule-list">
|
||||
<div v-for="(item, index) in data.schedule" :key="index"
|
||||
v-reveal="{ variant: 'up', delay: index * 120 }"
|
||||
class="schedule-row">
|
||||
<div class="schedule-time">{{ item.time }}</div>
|
||||
<div class="schedule-axis">
|
||||
<span class="schedule-node"><i></i></span>
|
||||
</div>
|
||||
<div class="schedule-copy">
|
||||
<span class="schedule-event">{{ item.event }}</span>
|
||||
<span class="schedule-desc">{{ item.desc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -338,7 +360,7 @@ const introExitClass = computed(() => {
|
||||
const effect = ['wind', 'book', 'lift', 'doors'].includes(data.value.introExitEffect) ? data.value.introExitEffect : 'wind'
|
||||
return `intro-exit-${effect}`
|
||||
})
|
||||
const introExitDuration = computed(() => ({ wind: 1280, book: 1220, lift: 980, doors: 1180 }[data.value.introExitEffect] || 1280))
|
||||
const introExitDuration = computed(() => ({ wind: 1280, book: 1680, lift: 980, doors: 1180 }[data.value.introExitEffect] || 1280))
|
||||
|
||||
const calendarWeekdays = ['一', '二', '三', '四', '五', '六', '日']
|
||||
const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
||||
@@ -659,6 +681,77 @@ onUnmounted(() => {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
/* ---------- 婚礼流程 ---------- */
|
||||
.schedule-page {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(253,251,247,0.74), rgba(247,246,242,0.92)),
|
||||
radial-gradient(circle at 50% 8%, rgba(232,201,210,0.14), transparent 34%);
|
||||
}
|
||||
.schedule-page::before,
|
||||
.schedule-page::after {
|
||||
content: ''; position: absolute; left: 50%; transform: translateX(-50%);
|
||||
width: min(62vw, 230px); height: 1px; pointer-events: none;
|
||||
background: linear-gradient(90deg, transparent, rgba(168,140,107,0.34), transparent);
|
||||
}
|
||||
.schedule-page::before { top: 42px; }
|
||||
.schedule-page::after { bottom: 42px; }
|
||||
.schedule-heading {
|
||||
text-align: center; margin-bottom: 38px; position: relative; z-index: 1;
|
||||
}
|
||||
.schedule-title {
|
||||
display: block; color: #a88c6b; font-size: 26px; line-height: 1.25;
|
||||
letter-spacing: 0.28em; padding-left: 0.28em; font-weight: 400;
|
||||
}
|
||||
.schedule-kicker {
|
||||
display: block; margin-top: 10px; color: #8A8680; font-size: 10px;
|
||||
letter-spacing: 0.4em; padding-left: 0.4em; text-transform: uppercase;
|
||||
}
|
||||
.schedule-list {
|
||||
width: min(100%, 360px); margin: 0 auto; position: relative;
|
||||
display: flex; flex-direction: column; gap: 24px;
|
||||
}
|
||||
.schedule-list::before {
|
||||
content: ''; position: absolute; top: 16px; bottom: 16px; left: 104px;
|
||||
width: 1px; background: linear-gradient(180deg, transparent, rgba(168,140,107,0.54) 12%, rgba(168,140,107,0.54) 88%, transparent);
|
||||
}
|
||||
.schedule-row {
|
||||
position: relative; display: grid; grid-template-columns: 78px 52px 1fr;
|
||||
align-items: center; min-height: 68px;
|
||||
}
|
||||
.schedule-time {
|
||||
justify-self: end; min-width: 72px; padding: 9px 10px 8px;
|
||||
color: #8f7250; font-family: var(--font-number); font-size: 19px;
|
||||
letter-spacing: 0.08em; text-align: center;
|
||||
border-top: 1px solid rgba(168,140,107,0.28);
|
||||
border-bottom: 1px solid rgba(168,140,107,0.2);
|
||||
background: rgba(255,255,255,0.26);
|
||||
}
|
||||
.schedule-axis {
|
||||
position: relative; height: 100%; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.schedule-node {
|
||||
width: 18px; height: 18px; border-radius: 9999px; position: relative;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: #fbf7ef; border: 1px solid rgba(168,140,107,0.52);
|
||||
box-shadow: 0 0 0 5px rgba(168,140,107,0.09), 0 6px 16px rgba(112,78,40,0.12);
|
||||
}
|
||||
.schedule-node i {
|
||||
width: 6px; height: 6px; border-radius: 9999px; display: block;
|
||||
background: #a88c6b;
|
||||
}
|
||||
.schedule-copy {
|
||||
min-width: 0; padding: 13px 0 13px 2px; text-align: left;
|
||||
border-bottom: 1px solid rgba(168,140,107,0.14);
|
||||
}
|
||||
.schedule-event {
|
||||
display: block; color: #3f3428; font-family: var(--font-serif);
|
||||
font-size: 16px; line-height: 1.4; letter-spacing: 0.16em; font-weight: 600;
|
||||
}
|
||||
.schedule-desc {
|
||||
display: block; margin-top: 5px; color: #8A8680; font-size: 10px;
|
||||
line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ---------- 婚礼日历 ---------- */
|
||||
.wedding-calendar-page {
|
||||
min-height: 76vh;
|
||||
@@ -711,35 +804,69 @@ onUnmounted(() => {
|
||||
}
|
||||
.calendar-day.is-empty { visibility: hidden; }
|
||||
.calendar-day-num {
|
||||
position: relative; z-index: 2;
|
||||
position: relative; z-index: 4;
|
||||
}
|
||||
.calendar-day.is-selected .calendar-day-num {
|
||||
color: #8f4d5a; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,0.75);
|
||||
width: 24px; height: 24px; border-radius: 9999px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #763342; font-weight: 900; font-size: 16px;
|
||||
background: rgba(253,251,247,0.9);
|
||||
box-shadow: 0 0 0 1px rgba(151,64,82,0.12), 0 4px 10px rgba(91,47,36,0.1);
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.82);
|
||||
}
|
||||
.heart-ring {
|
||||
position: absolute; inset: -9px; display: flex; align-items: center; justify-content: center;
|
||||
z-index: 1; animation: heartBeat 1.65s ease-in-out infinite;
|
||||
filter: drop-shadow(0 6px 10px rgba(151,76,91,0.18));
|
||||
z-index: 1; animation: heartBeat 1.8s ease-in-out infinite;
|
||||
filter: drop-shadow(0 5px 9px rgba(110,38,48,0.16));
|
||||
}
|
||||
.heart-ring svg {
|
||||
width: 56px; height: 50px; overflow: visible;
|
||||
width: 62px; height: 60px; overflow: visible;
|
||||
}
|
||||
.heart-brush {
|
||||
fill: rgba(182,106,120,0.06);
|
||||
stroke: #a94f62;
|
||||
stroke-width: 4.2;
|
||||
fill: none;
|
||||
stroke: #8f354a;
|
||||
stroke-width: 12.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-dasharray: 176;
|
||||
stroke-dashoffset: 176;
|
||||
animation: brushHeartDraw 1.25s cubic-bezier(0.18, 0.78, 0.24, 1) forwards;
|
||||
stroke-dasharray: 310;
|
||||
stroke-dashoffset: 310;
|
||||
animation: brushHeartDraw 1.55s cubic-bezier(0.16, 0.82, 0.22, 1) forwards;
|
||||
}
|
||||
.heart-brush-shadow {
|
||||
stroke: rgba(126,76,54,0.22);
|
||||
stroke-width: 6;
|
||||
transform: translate(1px, 1px) rotate(-2deg);
|
||||
stroke: rgba(72,38,29,0.18);
|
||||
stroke-width: 16;
|
||||
transform: translate(2px, 3px) rotate(-2.2deg);
|
||||
animation-delay: .06s;
|
||||
}
|
||||
.heart-brush-main {
|
||||
stroke: #91364a;
|
||||
}
|
||||
.heart-brush-tail {
|
||||
stroke: rgba(126,42,58,0.9);
|
||||
stroke-width: 7.8;
|
||||
stroke-dasharray: 58;
|
||||
stroke-dashoffset: 58;
|
||||
animation: brushTailDraw .62s cubic-bezier(0.18, 0.78, 0.24, 1) 1.08s forwards;
|
||||
}
|
||||
.heart-brush-cuts {
|
||||
opacity: 0;
|
||||
animation: dryBrushFlicker .42s ease-out .88s forwards;
|
||||
}
|
||||
.heart-brush-cuts path {
|
||||
fill: none;
|
||||
stroke: rgba(253,251,247,0.82);
|
||||
stroke-width: 2.3;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 13 9;
|
||||
}
|
||||
.heart-brush-cuts path:nth-child(2) { stroke-width: 3; }
|
||||
.heart-brush-cuts path:nth-child(3) { stroke-width: 2; opacity: .9; }
|
||||
.heart-brush-cuts path:nth-child(4) { stroke-width: 1.8; opacity: .74; }
|
||||
.heart-brush-speckles {
|
||||
fill: rgba(120,42,56,0.56);
|
||||
opacity: 0;
|
||||
animation: inkDotIn .42s ease-out .72s forwards;
|
||||
}
|
||||
.calendar-note {
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
margin-top: 24px; color: #806f5c; font-family: var(--font-kai);
|
||||
@@ -803,14 +930,30 @@ onUnmounted(() => {
|
||||
animation: inviteWindExit 1180ms cubic-bezier(0.4, 0, 1, 1) forwards;
|
||||
}
|
||||
.curtain-root.is-opening.intro-exit-book .curtain-emblem {
|
||||
opacity: 1; transform: none;
|
||||
opacity: 1; transform: none; perspective: 1500px;
|
||||
}
|
||||
.curtain-root.is-opening.intro-exit-book .emblem-inner { animation: inviteContentExit 480ms cubic-bezier(0.4, 0, 1, 1) 70ms forwards; }
|
||||
.curtain-root.is-opening.intro-exit-book .curtain-bg,
|
||||
.curtain-root.is-opening.intro-exit-book .curtain-veil,
|
||||
.curtain-root.is-opening.intro-exit-book .curtain-door {
|
||||
animation: bookBackdropFade 280ms ease-out forwards;
|
||||
}
|
||||
.curtain-root.is-opening.intro-exit-book .curtain-door-left,
|
||||
.curtain-root.is-opening.intro-exit-book .curtain-door-right {
|
||||
transform: none;
|
||||
}
|
||||
.curtain-root.is-opening.intro-exit-book .emblem-inner { animation: inviteContentExit 440ms cubic-bezier(0.4, 0, 1, 1) 330ms forwards; }
|
||||
.curtain-root.is-opening.intro-exit-book .invite-cover {
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: 0% 50%;
|
||||
will-change: transform, opacity, filter;
|
||||
animation: inviteBookExit 1120ms cubic-bezier(0.4, 0, 1, 1) forwards;
|
||||
transform-origin: 0% 0%;
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity, filter, box-shadow;
|
||||
animation: inviteBookExit 1220ms cubic-bezier(0.4, 0, 1, 1) 280ms forwards;
|
||||
}
|
||||
.curtain-root.is-opening.intro-exit-book .invite-cover::before {
|
||||
animation: bookCurlShadow 1220ms cubic-bezier(0.4, 0, 1, 1) 280ms forwards;
|
||||
}
|
||||
.curtain-root.is-opening.intro-exit-book .invite-cover::after {
|
||||
animation: bookCornerCurl 1220ms cubic-bezier(0.4, 0, 1, 1) 280ms forwards;
|
||||
}
|
||||
.curtain-root.is-opening.intro-exit-lift .curtain-emblem {
|
||||
opacity: 1; transform: none;
|
||||
@@ -1068,14 +1211,30 @@ onUnmounted(() => {
|
||||
52% { transform: scale(1.1); }
|
||||
}
|
||||
@keyframes brushHeartDraw {
|
||||
0% { stroke-dashoffset: 176; opacity: .34; }
|
||||
66% { stroke-dashoffset: 0; opacity: 1; }
|
||||
0% { stroke-dashoffset: 310; opacity: .2; }
|
||||
70% { stroke-dashoffset: 0; opacity: 1; }
|
||||
100% { stroke-dashoffset: 0; opacity: 1; }
|
||||
}
|
||||
@keyframes brushTailDraw {
|
||||
from { stroke-dashoffset: 58; opacity: .1; }
|
||||
to { stroke-dashoffset: 0; opacity: .9; }
|
||||
}
|
||||
@keyframes dryBrushFlicker {
|
||||
0% { opacity: 0; transform: scale(.98); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes inkDotIn {
|
||||
from { opacity: 0; transform: scale(.4); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes veilFade {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@keyframes bookBackdropFade {
|
||||
0% { opacity: 1; filter: blur(0); }
|
||||
100% { opacity: 0; filter: blur(2px); }
|
||||
}
|
||||
@keyframes inviteContentExit {
|
||||
0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
|
||||
100% { opacity: 0; transform: translateY(-7px) scale(.975); filter: blur(1px); }
|
||||
@@ -1088,11 +1247,82 @@ onUnmounted(() => {
|
||||
100% { opacity: 0; transform: translate3d(96vw, -42vh, 0) rotate(24deg) scale(.82); filter: blur(2px); }
|
||||
}
|
||||
@keyframes inviteBookExit {
|
||||
0% { opacity: 1; transform: rotateY(0deg) translateX(0) translateZ(0) scale(1); filter: brightness(1); }
|
||||
9% { opacity: 1; transform: rotateY(0deg) translateX(7px) translateZ(0) scale(.985); filter: brightness(.98); }
|
||||
38% { opacity: 1; transform: rotateY(-42deg) translateX(-10px) translateZ(36px) scale(.975); filter: brightness(.94); }
|
||||
72% { opacity: .72; transform: rotateY(-88deg) translateX(-34px) translateZ(26px) scale(.95); filter: brightness(.9) blur(.4px); }
|
||||
100% { opacity: 0; transform: rotateY(-112deg) translateX(-70px) translateZ(0) scale(.9); filter: brightness(.85) blur(1.8px); }
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg) scale(1);
|
||||
filter: brightness(1) blur(0);
|
||||
box-shadow: 0 28px 70px rgba(59,39,22,0.24), inset 0 0 0 10px rgba(255,255,255,0.34), inset 0 0 0 11px rgba(168,140,107,0.14);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: translate3d(4px, 5px, 0) rotateX(0deg) rotateY(0deg) rotateZ(.4deg) skew(.2deg) scale(.982, .992);
|
||||
filter: brightness(.98) blur(0);
|
||||
}
|
||||
24% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-10px, -14px, 42px) rotateX(-12deg) rotateY(18deg) rotateZ(-2deg) skew(1.2deg) scale(.992);
|
||||
filter: brightness(1.04) blur(0);
|
||||
box-shadow: 22px 30px 58px rgba(59,39,22,0.22), inset 14px 14px 24px rgba(87,57,31,0.1), inset 0 0 0 11px rgba(168,140,107,0.13);
|
||||
}
|
||||
48% {
|
||||
opacity: .96;
|
||||
transform: translate3d(-60px, -66px, 86px) rotateX(-32deg) rotateY(56deg) rotateZ(-8deg) skew(2.6deg) scale(.965);
|
||||
filter: brightness(.96) blur(.15px);
|
||||
box-shadow: 44px 42px 66px rgba(59,39,22,0.27), inset 28px 24px 36px rgba(87,57,31,0.18), inset 0 0 0 11px rgba(168,140,107,0.1);
|
||||
}
|
||||
74% {
|
||||
opacity: .58;
|
||||
transform: translate3d(-128px, -136px, 48px) rotateX(-48deg) rotateY(96deg) rotateZ(-15deg) skew(3.8deg) scale(.91);
|
||||
filter: brightness(.88) blur(.7px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-214px, -226px, -18px) rotateX(-60deg) rotateY(122deg) rotateZ(-22deg) skew(4.2deg) scale(.84);
|
||||
filter: brightness(.82) blur(1.8px);
|
||||
box-shadow: 56px 30px 44px rgba(59,39,22,0.1), inset 32px 32px 38px rgba(87,57,31,0.22);
|
||||
}
|
||||
}
|
||||
@keyframes bookCurlShadow {
|
||||
0%, 12% {
|
||||
border-color: rgba(168,140,107,0.25);
|
||||
box-shadow: none;
|
||||
}
|
||||
34% {
|
||||
border-color: rgba(168,140,107,0.2);
|
||||
box-shadow: inset 18px 16px 24px rgba(79,51,28,0.14), inset -8px 0 18px rgba(255,255,255,0.48);
|
||||
}
|
||||
72%, 100% {
|
||||
border-color: rgba(168,140,107,0.08);
|
||||
box-shadow: inset 28px 30px 38px rgba(79,51,28,0.18);
|
||||
}
|
||||
}
|
||||
@keyframes bookCornerCurl {
|
||||
0% {
|
||||
opacity: .44;
|
||||
clip-path: polygon(0 0, 0 0, 0 0);
|
||||
background:
|
||||
radial-gradient(circle at 0 0, rgba(255,255,255,0.9), rgba(236,219,198,0.5) 34%, rgba(93,58,32,0.22) 58%, transparent 62%),
|
||||
linear-gradient(135deg, rgba(168,140,107,0.15) 0 1px, transparent 2px);
|
||||
}
|
||||
22% {
|
||||
opacity: .96;
|
||||
clip-path: polygon(0 0, 42% 0, 0 42%);
|
||||
background:
|
||||
radial-gradient(circle at 14% 14%, rgba(255,255,255,0.94), rgba(239,223,204,0.62) 34%, rgba(99,62,34,0.26) 60%, transparent 64%),
|
||||
linear-gradient(135deg, rgba(255,255,255,0.42) 0 28%, rgba(92,58,31,0.2) 48%, transparent 57%);
|
||||
}
|
||||
52% {
|
||||
opacity: .82;
|
||||
clip-path: polygon(0 0, 64% 0, 0 64%);
|
||||
background:
|
||||
radial-gradient(circle at 24% 24%, rgba(255,255,255,0.78), rgba(239,223,204,0.56) 32%, rgba(84,50,28,0.34) 60%, transparent 65%),
|
||||
linear-gradient(132deg, rgba(255,255,255,0.34), rgba(83,49,27,0.25) 50%, transparent 60%);
|
||||
}
|
||||
100% {
|
||||
opacity: .18;
|
||||
clip-path: polygon(0 0, 82% 0, 0 82%);
|
||||
background: linear-gradient(132deg, rgba(255,255,255,0.28), rgba(72,45,26,0.32));
|
||||
}
|
||||
}
|
||||
@keyframes inviteLiftExit {
|
||||
0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
|
||||
|
||||
Reference in New Issue
Block a user