{"html":"

\n","css":".orbital {\n width: 100px;\n height: 100px;\n position: relative;\n margin: 0 auto;\n cursor: pointer;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-radius: 110px;\n}\n.ringOne {\n position: absolute;\n top: -10px;\n right: -10px;\n bottom: -10px;\n left: -10px;\n border-radius: 200px;\n box-shadow: -5px -5px 15px rgba(15, 180, 231, 0.3);\n}\n.ringTwo {\n background: #161616; /* Old browsers */\n background: -moz-linear-gradient(top, #161616 0%, #3d3d3d 100%); /* FF3.6+ */\n background: -webkit-gradient(\n linear,\n left top,\n left bottom,\n color-stop(0%, #161616),\n color-stop(100%, #3d3d3d)\n ); /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(\n top,\n #161616 0%,\n #3d3d3d 100%\n ); /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(\n top,\n #161616 0%,\n #3d3d3d 100%\n ); /* Opera 11.10+ */\n background: -ms-linear-gradient(top, #161616 0%, #3d3d3d 100%); /* IE10+ */\n background: linear-gradient(to bottom, #161616 0%, #3d3d3d 100%); /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */\n\n border: 1px solid #444;\n position: absolute;\n top: -25px;\n right: -25px;\n bottom: -25px;\n left: -25px;\n border-radius: 200px;\n z-index: -2;\n}\n.spin {\n margin: 0 auto;\n background: #91ffff; /* Old browsers */\n background: -moz-radial-gradient(\n 20% 20%,\n ellipse cover,\n #91ffff 0%,\n #920a51 24%,\n #000000 74%,\n #000000 100%\n ); /* FF3.6+ */\n background: -webkit-gradient(\n radial,\n 20% 20%,\n 0px,\n 20% 20%,\n 100%,\n color-stop(0%, #91ffff),\n color-stop(24%, #0fb4e7),\n color-stop(74%, #000000),\n color-stop(100%, #000000)\n ); /* Chrome,Safari4+ */\n background: -webkit-radial-gradient(\n 20% 20%,\n ellipse cover,\n #91ffff 0%,\n #0fb4e7 24%,\n #000000 74%,\n #000000 100%\n ); /* Chrome10+,Safari5.1+ */\n background: -o-radial-gradient(\n 20% 20%,\n ellipse cover,\n #91ffff 0%,\n #0fb4e7 24%,\n #000000 74%,\n #000000 100%\n ); /* Opera 12+ */\n background: -ms-radial-gradient(\n 20% 20%,\n ellipse cover,\n #91ffff 0%,\n #0fb4e7 24%,\n #000000 74%,\n #000000 100%\n ); /* IE10+ */\n background: radial-gradient(\n ellipse at 20% 20%,\n #91ffff 0%,\n #0fb4e7 24%,\n #000000 74%,\n #000000 100%\n ); /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91ffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */\n\n border-radius: 110px;\n padding: 10px;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n@-webkit-keyframes spinRotation {\n from {\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@-moz-keyframes spinRotation {\n from {\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes spinRotation {\n from {\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n.spin {\n -webkit-animation-name: spinRotation;\n -webkit-animation-duration: 1s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-timing-function: linear;\n -moz-animation-name: spinRotation;\n -moz-animation-duration: 1s;\n -moz-animation-iteration-count: infinite;\n -moz-animation-timing-function: linear;\n animation-name: spinRotation;\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n.ringTwo {\n -webkit-animation-name: spinRotation;\n -webkit-animation-duration: 1s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-timing-function: linear;\n -moz-animation-name: spinRotation;\n -moz-animation-duration: 1s;\n -moz-animation-iteration-count: infinite;\n -moz-animation-timing-function: linear;\n animation-name: spinRotation;\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n.ringThree {\n color: #fff;\n background-color: #ccc;\n position: absolute;\n top: -10px;\n left: -10px;\n right: -10px;\n bottom: -10px;\n z-index: -1;\n border-radius: 110px;\n background: #575b60; /* Old browsers */\n background: -moz-radial-gradient(\n center,\n ellipse cover,\n #575b60 1%,\n #000000 100%\n ); /* FF3.6+ */\n background: -webkit-gradient(\n radial,\n center center,\n 0px,\n center center,\n 100%,\n color-stop(1%, #575b60),\n color-stop(100%, #000000)\n ); /* Chrome,Safari4+ */\n background: -webkit-radial-gradient(\n center,\n ellipse cover,\n #575b60 1%,\n #000000 100%\n ); /* Chrome10+,Safari5.1+ */\n background: -o-radial-gradient(\n center,\n ellipse cover,\n #575b60 1%,\n #000000 100%\n ); /* Opera 12+ */\n background: -ms-radial-gradient(\n center,\n ellipse cover,\n #575b60 1%,\n #000000 100%\n ); /* IE10+ */\n background: radial-gradient(\n ellipse at center,\n #575b60 1%,\n #000000 100%\n ); /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575b60', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */\n box-shadow:\n -1px 0px 0px #333,\n 0px -1px 0px #333;\n}\n.core {\n color: #ccc;\n background-color: #ccc;\n position: absolute;\n top: 5px;\n left: 5px;\n right: 5px;\n bottom: 5px;\n z-index: 2;\n border-radius: 110px;\n background: #575b60; /* Old browsers */\n background: -moz-radial-gradient(\n center,\n ellipse cover,\n #575b60 1%,\n #000000 100%\n ); /* FF3.6+ */\n background: -webkit-gradient(\n radial,\n center center,\n 0px,\n center center,\n 100%,\n color-stop(1%, #575b60),\n color-stop(100%, #000000)\n ); /* Chrome,Safari4+ */\n background: -webkit-radial-gradient(\n center,\n ellipse cover,\n #575b60 1%,\n #000000 100%\n ); /* Chrome10+,Safari5.1+ */\n background: -o-radial-gradient(\n center,\n ellipse cover,\n #575b60 1%,\n #000000 100%\n ); /* Opera 12+ */\n background: -ms-radial-gradient(\n center,\n ellipse cover,\n #575b60 1%,\n #000000 100%\n ); /* IE10+ */\n background: radial-gradient(\n ellipse at center,\n #575b60 1%,\n #000000 100%\n ); /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575b60', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */\n box-shadow:\n -1px 0px 0px #666,\n 0px -1px 0px #666;\n}\n.core:active {\n color: #fff;\n background: #373a3d; /* Old browsers */\n background: -moz-radial-gradient(\n center,\n ellipse cover,\n #373a3d 1%,\n #000000 100%\n ); /* FF3.6+ */\n background: -webkit-gradient(\n radial,\n center center,\n 0px,\n center center,\n 100%,\n color-stop(1%, #373a3d),\n color-stop(100%, #000000)\n ); /* Chrome,Safari4+ */\n background: -webkit-radial-gradient(\n center,\n ellipse cover,\n #373a3d 1%,\n #000000 100%\n ); /* Chrome10+,Safari5.1+ */\n background: -o-radial-gradient(\n center,\n ellipse cover,\n #373a3d 1%,\n #000000 100%\n ); /* Opera 12+ */\n background: -ms-radial-gradient(\n center,\n ellipse cover,\n #373a3d 1%,\n #000000 100%\n ); /* IE10+ */\n background: radial-gradient(\n ellipse at center,\n #373a3d 1%,\n #000000 100%\n ); /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373a3d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */\n}\n\n/* Button Container */\n.orbital {\n width: 100px;\n height: 100px;\n position: relative;\n margin: 0 auto;\n cursor: pointer;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-radius: 110px;\n transition: transform 0.3s ease-in-out; /* Smooth hover effect */\n}\n\n.orbital:hover {\n transform: scale(1.1); /* Slightly increases size on hover */\n}\n\n/* Outer Ring */\n.ringOne {\n position: absolute;\n top: -10px;\n right: -10px;\n bottom: -10px;\n left: -10px;\n border-radius: 200px;\n box-shadow: -5px -5px 15px rgba(15, 180, 231, 0.3);\n}\n\n/* Middle Ring */\n.ringTwo {\n border: 1px solid #444;\n position: absolute;\n top: -25px;\n right: -25px;\n bottom: -25px;\n left: -25px;\n border-radius: 200px;\n z-index: -2;\n background: linear-gradient(to bottom, #161616 0%, #3d3d3d 100%);\n animation: rotateClockwise 4s infinite linear; /* Rotate clockwise */\n}\n\n/* Core */\n.core {\n color: #ccc;\n background-color: #ccc;\n position: absolute;\n top: 5px;\n left: 5px;\n right: 5px;\n bottom: 5px;\n z-index: 2;\n border-radius: 110px;\n background: radial-gradient(ellipse at center, #575b60 1%, #000000 100%);\n box-shadow:\n -1px 0px 0px #666,\n 0px -1px 0px #666;\n animation: pulse 2s infinite ease-in-out; /* Pulse animation */\n}\n\n.core:hover {\n background: radial-gradient(ellipse at center, #373a3d 1%, #000000 100%);\n}\n\n.core p {\n text-align: center;\n margin-top: 40%;\n font-size: 18px;\n font-family: sans-serif;\n font-weight: bolder;\n text-shadow: -1px -1px 0px #444;\n}\n\n/* Spin Animation */\n.spin {\n background: radial-gradient(\n ellipse at 20% 20%,\n #91ffff 0%,\n #0fb4e7 24%,\n #000000 100%\n );\n border-radius: 110px;\n padding: 10px;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n animation: rotateAntiClockwise 6s infinite linear; /* Rotate anticlockwise */\n}\n\n/* Animations */\n\n/* Rotate clockwise */\n@keyframes rotateClockwise {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Rotate anticlockwise */\n@keyframes rotateAntiClockwise {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(-360deg);\n }\n}\n\n/* Pulse animation for the core */\n@keyframes pulse {\n 0% {\n transform: scale(1);\n box-shadow: 0 0 5px #666;\n }\n 50% {\n transform: scale(1.1);\n box-shadow: 0 0 15px #0fb4e7;\n }\n 100% {\n transform: scale(1);\n box-shadow: 0 0 5px #666;\n }\n}\n"}

helpless-moose-39

👁 实时预览

📝 源代码