From 7708a0e632cd0c929fd38d76d1fc8c3f330b4ef3 Mon Sep 17 00:00:00 2001 From: jekkinoopy Date: Tue, 2 Jun 2026 10:49:36 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=AD=E9=A0=85=E5=84=AA=E5=85=88?= =?UTF-8?q?=E5=8B=95=E7=95=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/concert.css | 59 +++++++++++++++++++++++++ assets/css/index.css | 64 +++++++++++++++++++++++++++ assets/css/style.css | 99 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 222 insertions(+) diff --git a/assets/css/concert.css b/assets/css/concert.css index ea76793..af2123e 100644 --- a/assets/css/concert.css +++ b/assets/css/concert.css @@ -540,4 +540,63 @@ img { z-index: 10; white-space: nowrap; opacity: 1; +} + +@keyframes access-canceled-breathe { + + 0%, + 100% { + opacity: 0.7; + } + + 50% { + opacity: 1; + } +} + +@keyframes concert-stamp-before { + 0% { + opacity: 0; + transform: rotate(-12deg) scale(1.18); + } + + 100% { + opacity: 1; + transform: rotate(-12deg) scale(1); + } +} + +@keyframes concert-stamp-after { + 0% { + opacity: 0; + transform: rotate(8deg) scale(1.18); + } + + 100% { + opacity: 1; + transform: rotate(8deg) scale(1); + } +} + +@media (prefers-reduced-motion: no-preference) { + .con-4.con-access-denied[data-tour="ACCESS"]::before { + animation: access-canceled-breathe 2.6s ease-in-out infinite; + } + + .attended::before { + animation: concert-stamp-before 0.5s ease-out backwards; + } + + .attended::after { + animation: concert-stamp-after 0.5s ease-out 0.14s backwards; + } +} + +@media (prefers-reduced-motion: reduce) { + + .con-4.con-access-denied[data-tour="ACCESS"]::before, + .attended::before, + .attended::after { + animation: none; + } } \ No newline at end of file diff --git a/assets/css/index.css b/assets/css/index.css index 6a03696..d24032f 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -448,3 +448,67 @@ header#origin .site-header-inner .subtitle-wrap::after { margin: 0; white-space: nowrap; } + +/* 入坑歷程：波浪底線平移＋箭頭輕推（僅首頁 #start） */ +@keyframes fan-journey-wave-drift { + 0% { + background-position: left 0 bottom 3px; + } + + 100% { + background-position: left 280px bottom 3px; + } +} + +@keyframes fan-journey-arrow-nudge { + + 0%, + 100% { + transform: translateX(0); + } + + 50% { + transform: translateX(3px); + } +} + +@media (prefers-reduced-motion: no-preference) { + .home-page #start .fan-journey-wave { + animation: fan-journey-wave-drift 14s linear infinite; + } + + .home-page #start .fan-journey-wave i { + animation: fan-journey-arrow-nudge 1.35s ease-in-out infinite; + } +} + +/* 成立的初衷：↑ 指示輕跳（僅首頁 #mission） */ +@keyframes mission-arrow-bounce { + + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-4px); + } +} + +@media (prefers-reduced-motion: no-preference) { + + .home-page #mission .logo-wrapper .arrow-icon, + .home-page #mission .mission-moment-wrap .arrow-icon { + display: inline-block; + animation: mission-arrow-bounce 1.85s ease-in-out infinite; + } +} + +@media (prefers-reduced-motion: reduce) { + .home-page #start .fan-journey-wave, + .home-page #start .fan-journey-wave i, + .home-page #mission .logo-wrapper .arrow-icon, + .home-page #mission .mission-moment-wrap .arrow-icon { + animation: none; + } +} diff --git a/assets/css/style.css b/assets/css/style.css index 2595a14..650fa7d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1345,6 +1345,12 @@ section { mask: url('../images/icon/balloon.svg') center / contain no-repeat; } +@media (prefers-reduced-motion: no-preference) { + .fa-before-lead.fa-before-lead--balloon::before { + animation: ebook-balloon-float 2.4s ease-in-out infinite; + } +} + /* 金句：基底只放結構：視覺請用 --mission / --awakening，兩句互不覆寫 */ .slogan-quote { box-sizing: border-box; @@ -1548,6 +1554,44 @@ a { z-index: 2; } +@media (prefers-reduced-motion: no-preference) { + .merged-storyline .story-node::before { + animation: timeline-diamond-enter 0.55s ease-out backwards; + } + + .merged-storyline .story-node:nth-of-type(1)::before { + animation-delay: 0.06s; + } + + .merged-storyline .story-node:nth-of-type(2)::before { + animation-delay: 0.14s; + } + + .merged-storyline .story-node:nth-of-type(3)::before { + animation-delay: 0.22s; + } + + .merged-storyline .story-node:nth-of-type(4)::before { + animation-delay: 0.3s; + } + + .merged-storyline .story-node:nth-of-type(5)::before { + animation-delay: 0.38s; + } + + .merged-storyline .story-node:nth-of-type(6)::before { + animation-delay: 0.46s; + } + + .merged-storyline .story-node:nth-of-type(7)::before { + animation-delay: 0.54s; + } + + .merged-storyline .story-node:nth-of-type(8)::before { + animation-delay: 0.62s; + } +} + .merged-storyline .story-node::after { content: attr(data-era); position: absolute; @@ -1714,10 +1758,39 @@ a { } } +@keyframes timeline-diamond-enter { + from { + opacity: 0; + transform: scale(0.72); + } + + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes ebook-balloon-float { + + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-5px); + } +} + @media (prefers-reduced-motion: reduce) { .merged-storyline .timeline-ebook-cta .fa-hand-pointer { animation: none; } + + .merged-storyline .story-node::before, + .fa-before-lead.fa-before-lead--balloon::before { + animation: none; + } } .merged-storyline .story-node h3 { @@ -3058,6 +3131,32 @@ body.totoga2-page .totoga2-split-crossnav { margin-top: 0.75rem; } +@keyframes totoga2-nav-current-pulse { + + 0%, + 100% { + box-shadow: 0 2px 10px rgba(230, 184, 0, 0.35); + } + + 50% { + box-shadow: + 0 4px 18px rgba(230, 184, 0, 0.5), + 0 0 0 3px rgba(255, 204, 0, 0.22); + } +} + +@media (prefers-reduced-motion: no-preference) { + body.totoga2-page .totoga2-split-crossnav a.btn[aria-current="page"] { + animation: totoga2-nav-current-pulse 2.2s ease-in-out infinite; + } +} + +@media (prefers-reduced-motion: reduce) { + body.totoga2-page .totoga2-split-crossnav a.btn[aria-current="page"] { + animation: none; + } +} + /* member/member.html — 黑白水晶交錯格（2×4）與懸賞令海報 */ body.member-crystal-page .member-crystal-main { padding: 1.75rem 14px 3rem;