From bdb0765c5579c430cbe1ef79cf3d62831bb062a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?FunctionHook=E5=87=BD=E9=92=A9?= Date: Sun, 4 Oct 2026 14:30:44 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9B=B7=E8=BE=BE=E6=89=AB=E6=8F=8F=E6=96=B9?= =?UTF-8?q?=E5=90=91=E5=8F=8D=E4=BA=86=EF=BC=9A=E4=BA=AE=E8=BE=B9=E5=BA=94?= =?UTF-8?q?=E9=A2=86=E5=85=88=E6=8B=96=E5=B0=BE=EF=BC=8C=E6=8A=8A=E4=B8=A4?= =?UTF-8?q?=E5=A4=84=20conic-gradient=20=E7=9A=84=E4=BA=AE=E7=AB=AF?= =?UTF-8?q?=E7=BF=BB=E5=88=B0=20100%=20(#81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/screens/room.css | 4 +++- public/css/screens/title.css | 6 +++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/public/css/screens/room.css b/public/css/screens/room.css index 513e788e..19878d23 100644 --- a/public/css/screens/room.css +++ b/public/css/screens/room.css @@ -177,7 +177,9 @@ border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 .2rem, rgba(78, 216, 175, .14) .2rem .21rem), - conic-gradient(from 0deg, rgba(23, 249, 183, .2), transparent 25%); + /* same geometry as .title-bg__sweep: bright edge at 100% (== 0deg) so it leads the clockwise + rotation and the glow trails behind; see the comment in screens/title.css. */ + conic-gradient(from 0deg, transparent 0 75%, rgba(23, 249, 183, .2) 100%); -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 71%); mask-image: radial-gradient(circle, #000 60%, transparent 71%); animation: radar-sweep 4s linear infinite; diff --git a/public/css/screens/title.css b/public/css/screens/title.css index feb69d83..63357d95 100644 --- a/public/css/screens/title.css +++ b/public/css/screens/title.css @@ -72,7 +72,11 @@ position: absolute; inset: 0; border-radius: 50%; - background: conic-gradient(from 0deg, rgba(23, 249, 183, .28), rgba(23, 249, 183, 0) 22%, transparent 100%); + /* The bright edge must LEAD and the glow must trail BEHIND it. A conic gradient's angle grows + clockwise from 0deg (12 o'clock), and radar-sweep rotates clockwise too — so the bright end has + to sit at 100% (== 0deg) and fade counter-clockwise from there. Written the other way round + (bright at 0% fading to 22%) the glow fans out AHEAD of the beam and the sweep reads backwards. */ + background: conic-gradient(from 0deg, transparent 0 78%, rgba(23, 249, 183, .28) 100%); animation: radar-sweep 6s linear infinite; } @keyframes radar-sweep { to { transform: rotate(360deg); } }