Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
3.0 kB · 126 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127@keyframes spin { from { transform: rotate(60deg); } to { transform: rotate(300deg); }}
.rotor-wrapper { timeline-scope: --rotor-scroll; font-size: 1em; min-width: 6em; min-height: 6em; height: 80%; aspect-ratio: 1; margin-top: 2em; position: relative;}.rotor-reflection { position: absolute; top: 0; left: 0; border-radius: 50%; width: 100%; height: 100%; background: linear-gradient(-45deg, #444, #999);}.rotor-reflection:before { background: repeating-radial-gradient( circle at center, rgba(255, 255, 255, 0.08) 0px, rgba(0, 0, 0, 0.08) 0.5px, rgba(255, 255, 255, 0.08) 1px ), conic-gradient(#eee, #888, #ccc, #777, #ccc, #777, #999, #eee); content: ""; position: absolute; width: 95%; height: 95%; left: 2.5%; top: 2.5%;
pointer-events: none; border-radius: 50%; box-shadow: 0.5rem 0.5rem 0.5rem rgb(0 0 0 / 0.3);}.rotor { border-radius: 50%; position: relative; width: 100%; height: 100%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.1'/></svg>"); transition: background-position var(--dur) linear; animation: spin linear both; animation-timeline: --rotor-scroll; animation-range: 0% 100%;}.rotor:after { content: ""; position: absolute; width: 0.5rem; height: 0.5rem; background: linear-gradient(to bottom, #222, #999); box-shadow: inset 1px 1px 2px hsl(0 0 100% / 0.5); border-radius: 100%; left: 50%; top: 0.25rem; transform: translate(-50%, 0); cursor: pointer;}.segments-scroller { position: absolute; inset: 0; overflow: scroll; opacity: 0; scroll-snap-type: both mandatory; scroll-timeline-name: --rotor-scroll; scroll-timeline-axis: block; user-select: none;}.segment { width: 100%; height: 100%; scroll-snap-align: start;}.rotor-labels { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: translate(50%, 50%); pointer-events: none; --radius: 60%;}.rotor-label { position: absolute; transform: translate(-50%, -50%); color: white;}.rotor-label:nth-child(1) { top: calc(cos(60deg) * -1 * var(--radius)); left: calc(sin(60deg) * var(--radius));}.rotor-label:nth-child(2) { top: calc(cos(110deg) * -1 * var(--radius)); left: calc(sin(110deg) * var(--radius));}.rotor-label:nth-child(3) { top: calc(cos(160deg) * -1 * var(--radius)); left: calc(sin(160deg) * var(--radius));}.rotor-label:nth-child(4) { top: calc(cos(210deg) * -1 * var(--radius)); left: calc(sin(210deg) * var(--radius));}.rotor-label:nth-child(5) { top: calc(cos(260deg) * -1 * var(--radius)); left: calc(sin(260deg) * var(--radius));}.rotor-label:nth-child(6) { top: calc(cos(310deg) * -1 * var(--radius)); left: calc(sin(310deg) * var(--radius));}