i made a spinner of the game i play<\/p>\n\n\n\n
js<\/p>\n\n\n\n
document.addEventListener(\"DOMContentLoaded\", () => {\n const center = document.querySelector(\".spinner-center\");\n\n center.addEventListener(\"click\", () => {\n center.classList.remove(\"glow\");\n void center.offsetWidth;\n center.classList.add(\"glow\");\n });\n\n\n});\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const center = document.querySelector(\".spinner-center\");\n\n center.addEventListener(\"click\", () => {\n center.classList.remove(\"spin\");\n void center.offsetWidth; \/\/ restart animation\n center.classList.add(\"spin\");\n });\n});<\/code><\/pre>\n\n\n\nhtml<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>Symbol Spinner<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <div class=\"spinner-wrapper\">\n <div class=\"spinner-ring\">\n <div class=\"spinner-item\"><img src=\"Borumaki_Gaiden.webp\"><\/div>\n <div class=\"spinner-item\"><img src=\"BorumakiShiki.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"Code_Gaiden.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"Fizz.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"Frost.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"Inferno.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"Ink.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"Magma.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"Menza.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"Octo-Ink.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"ShiverRagnar.webp\"><\/div>\n <div class=\"spinner-item\"><\/div><img src=\"SurgeIcon.webp\"><\/div>\n <\/div>\n\n <div class=\"spinner-center\"><\/div>\n <\/div>\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\ncss<\/p>\n\n\n\n
body {\n margin: 0;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #050510;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n }\n\n .spinner-wrapper {\n position: relative;\n width: 300px;\n height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n }\n\n .spinner-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n animation: spin 8s linear infinite;\n top: 45px;\n }\n\n .spinner-item {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 70px;\n height: 70px;\n transform-origin: 0 -120px;\n }\n\n .spinner-item img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));\n transform: rotate(calc(-1 * var(--angle)));\n }\n\n .spinner-item:nth-child(1) { --angle: 0deg; transform: rotate(0deg); }\n .spinner-item:nth-child(2) { --angle: 30deg; transform: rotate(30deg); }\n .spinner-item:nth-child(3) { --angle: 60deg; transform: rotate(60deg); }\n .spinner-item:nth-child(4) { --angle: 90deg; transform: rotate(90deg); }\n .spinner-item:nth-child(5) { --angle: 120deg; transform: rotate(120deg); }\n .spinner-item:nth-child(6) { --angle: 150deg; transform: rotate(150deg); }\n .spinner-item:nth-child(7) { --angle: 180deg; transform: rotate(180deg); }\n .spinner-item:nth-child(8) { --angle: 210deg; transform: rotate(210deg); }\n .spinner-item:nth-child(9) { --angle: 240deg; transform: rotate(240deg); }\n .spinner-item:nth-child(10) { --angle: 270deg; transform: rotate(270deg); }\n .spinner-item:nth-child(11) { --angle: 300deg; transform: rotate(300deg); }\n .spinner-item:nth-child(12) { --angle: 330deg; transform: rotate(330deg); }\n\n.spinner-center {\n position: absolute;\n width: 140px;\n height: 140px;\n border-radius: 50%;\n cursor: pointer;\n top:0;\n background: radial-gradient(circle,\n rgba(180, 0, 255, 1) 0%,\n rgba(110, 10, 180, 1) 40%,\n rgba(40, 0, 80, 1) 70%,\n rgba(10, 0, 30, 1) 100%\n );\n\n\n\nbox-shadow{\n display: flex;\n}\n \n\n animation: pulse 3s ease-in-out infinite;\n transition: transform 0.2s ease;\n}\n\n\n.glow{\n box-shadow:\n 0 0 25px rgba(180, 0, 255, 0.8),\n 0 0 60px rgba(150, 0, 255, 0.6),\n 0 0 120px rgba(120, 0, 255, 0.4),\n inset 0 0 40px rgba(255, 255, 255, 0.15),\n inset 0 0 80px rgba(180, 0, 255, 0.25);\n\n transition: ease all 1s;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"i made a spinner of the game i play js html css<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts\/38\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}