雷达扫描方向反了:亮边应领先拖尾,把两处 conic-gradient 的亮端翻到 100% (#81)
This commit is contained in:
1 parent
50498bbe07
commit
bdb0765c55
2 files changed
+8
-2
No files matched your search
@@ -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;
|
||||
|
||||
@@ -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); } }
|
||||
|
||||
Reference in new issue
Block a user