Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
1.5 kB · 65 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566.sensors-ping { --scale: 1; transform: translate(-50%, -50%) scale(var(--scale)); transform-origin: center; opacity: 0; @starting-style { opacity: 1; transform: translate(-50%, -50%) scale(0); }}
.sonar-background { background: radial-gradient( ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(31, 91, 158, 0) 21%, rgba(41, 137, 216, 0.24) 50%, rgba(34, 107, 178, 0.8) 61%, rgba(30, 88, 154, 0) 70% ); background-position: center; background-repeat: no-repeat; background-size: 0% 0%; transition: all 0s linear;}
.sonar-background.ping { transition: all 10s ease; background-size: 600% 600%;}
.sonar-background:not(.is-core) .sensor-contacts { animation-iteration-count: 1; animation-play-state: paused; animation-duration: 6.5s; animation-timing-function: cubic-bezier(1, 0, 0, 1); mask-image: radial-gradient(transparent 0%, black 0.1%, black 10%, rgba(0, 0, 0, 0) 20%); mask-size: 1% 1%; mask-repeat: no-repeat; mask-position: center;}.sonar-background:not(.is-core).ping .sensor-contacts { animation-name: sensors-ping-mask; animation-play-state: running;}.sonar-background:not(.is-core) .sensor-contacts div { pointer-events: none;}.sonar-background:not(.is-core) .sensor-contacts.can-hover div { pointer-events: auto;}@keyframes sensors-ping-mask { 0% { mask-size: 1% 1%; } 40% { mask-size: 2000% 2000%; } 60% { mask-size: 2000% 2000%; } 100% { mask-size: 2000000% 2000000%; }}