14 lines
1.2 KiB
CSS
14 lines
1.2 KiB
CSS
.motion-visual{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;isolation:isolate}
|
|
.motion-visual>img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
|
|
.motion-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .45s ease;z-index:1}
|
|
.motion-visual.is-active .motion-overlay{opacity:1}
|
|
.motion-path{fill:none;stroke:#67e8f9;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 17;opacity:.72;animation:motion-trace 6s linear infinite;animation-play-state:paused}
|
|
.motion-packet{fill:#f0fdff;stroke:#22d3ee;stroke-width:2;filter:drop-shadow(0 0 7px #22d3ee)}
|
|
.motion-packet-late{fill:#a5f3fc;opacity:.8}
|
|
.motion-light{fill:#67e8f9;stroke:#e0faff;stroke-width:2;filter:drop-shadow(0 0 9px #22d3ee);animation:motion-led 2.4s ease-in-out infinite;animation-play-state:paused}
|
|
.motion-light:nth-of-type(2n){animation-delay:.8s}
|
|
.motion-visual.is-active .motion-path,.motion-visual.is-active .motion-light{animation-play-state:running}
|
|
@keyframes motion-trace{to{stroke-dashoffset:-76}}
|
|
@keyframes motion-led{0%,100%{opacity:.38}50%{opacity:1}}
|
|
@media(prefers-reduced-motion:reduce){.motion-overlay{display:none!important}.motion-path,.motion-light{animation:none!important}}
|