雷达扫描方向反了:亮边应领先拖尾,把两处 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%;
|
border-radius: 50%;
|
||||||
background:
|
background:
|
||||||
repeating-radial-gradient(circle, transparent 0 .2rem, rgba(78, 216, 175, .14) .2rem .21rem),
|
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%);
|
-webkit-mask-image: radial-gradient(circle, #000 60%, transparent 71%);
|
||||||
mask-image: radial-gradient(circle, #000 60%, transparent 71%);
|
mask-image: radial-gradient(circle, #000 60%, transparent 71%);
|
||||||
animation: radar-sweep 4s linear infinite;
|
animation: radar-sweep 4s linear infinite;
|
||||||
|
|||||||
@@ -72,7 +72,11 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
border-radius: 50%;
|
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;
|
animation: radar-sweep 6s linear infinite;
|
||||||
}
|
}
|
||||||
@keyframes radar-sweep { to { transform: rotate(360deg); } }
|
@keyframes radar-sweep { to { transform: rotate(360deg); } }
|
||||||
|
|||||||
Reference in new issue
Block a user