雷达扫描方向反了:亮边应领先拖尾,把两处 conic-gradient 的亮端翻到 100% (#81)

This commit is contained in:
FunctionHook函钩 authored and GitHub committed 2026-10-04 14:30:44 +08:00
1 parent 50498bbe07
commit bdb0765c55
2 files changed
+8 -2

No files matched your search

+3 -1
View File
@@ -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;
+5 -1
View File
@@ -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); } }