{
"id": "Cksunandh_helpless-moose-39",
"name": "helpless-moose-39",
"category": "loaders",
"author": "Cksunandh",
"description": "helpless-moose-39 组件 (loader, animation, gradient, interactive)",
"tags": [
"loader",
"animation",
"gradient",
"interactive"
],
"original": {
"html": "",
"css": "/* From Uiverse.io by Cksunandh - Tags: loader */\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}\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}",
"file_path": "/mnt/persist/workspace/loaders/Cksunandh_helpless-moose-39.html"
},
"uniapp": {
"template": "\n \n \n \n \n \n",
"script": "export default {\n name: 'GalaxyHelplessMoose39',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by Cksunandh - Tags: loader */\n.orbital {\n width: 200rpx;\n height: 200rpx;\n position: relative;\n margin: 0 auto;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\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: 220rpx;\n}\n.ringOne {\n position: absolute;\n top: -20rpx;\n right: -20rpx;\n bottom: -20rpx;\n left: -20rpx;\n border-radius: 400rpx;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: -10rpx -10rpx 30rpx rgba(15, 180, 231, 0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\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 /* IE6-9 */\n\n border: 2rpx solid #444;\n position: absolute;\n top: -50rpx;\n right: -50rpx;\n bottom: -50rpx;\n left: -50rpx;\n border-radius: 400rpx;\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 0rpx,\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 /* IE6-9 fallback on horizontal gradient */\n\n border-radius: 220rpx;\n padding: 20rpx;\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: -20rpx;\n left: -20rpx;\n right: -20rpx;\n bottom: -20rpx;\n z-index: -1;\n border-radius: 220rpx;\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 0rpx,\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 /* IE6-9 fallback on horizontal gradient */\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow:\n -2rpx 0rpx 0rpx #333,\n 0rpx -2rpx 0rpx #333;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n}\n.core {\n color: #ccc;\n background-color: #ccc;\n position: absolute;\n top: 10rpx;\n left: 10rpx;\n right: 10rpx;\n bottom: 10rpx;\n z-index: 2;\n border-radius: 220rpx;\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 0rpx,\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 /* IE6-9 fallback on horizontal gradient */\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow:\n -2rpx 0rpx 0rpx #666,\n 0rpx -2rpx 0rpx #666;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\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 0rpx,\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 /* IE6-9 fallback on horizontal gradient */\n}\n\n/* Button Container */\n.orbital {\n width: 200rpx;\n height: 200rpx;\n position: relative;\n margin: 0 auto;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\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: 220rpx;\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: -20rpx;\n right: -20rpx;\n bottom: -20rpx;\n left: -20rpx;\n border-radius: 400rpx;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: -10rpx -10rpx 30rpx rgba(15, 180, 231, 0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n}\n\n/* Middle Ring */\n.ringTwo {\n border: 2rpx solid #444;\n position: absolute;\n top: -50rpx;\n right: -50rpx;\n bottom: -50rpx;\n left: -50rpx;\n border-radius: 400rpx;\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: 10rpx;\n left: 10rpx;\n right: 10rpx;\n bottom: 10rpx;\n z-index: 2;\n border-radius: 220rpx;\n background: radial-gradient(ellipse at center, #575b60 1%, #000000 100%);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow:\n -2rpx 0rpx 0rpx #666,\n 0rpx -2rpx 0rpx #666;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\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: 36rpx;\n font-family: sans-serif;\n font-weight: bolder;\n /* #ifdef H5 */\n text-shadow: -2rpx -2rpx 0rpx #444;\n /* #endif */\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: 220rpx;\n padding: 20rpx;\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 /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 10rpx #666;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n 50% {\n transform: scale(1.1);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 30rpx #0fb4e7;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n 100% {\n transform: scale(1);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 10rpx #666;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n}\n\n",
"component_name": "GalaxyHelplessMoose39"
},
"platforms": {
"h5": true,
"mp-weixin": true,
"mp-alipay": true,
"mp-baidu": true,
"mp-toutiao": true,
"app-plus": true
},
"props": [
{
"name": "disabled",
"type": "Boolean",
"default": false,
"required": false,
"description": "是否禁用"
}
],
"events": [],
"slots": [
{
"name": "",
"description": "",
"props": []
}
],
"compatibility": {
"h5": {
"supported": true,
"issues": [],
"alternatives": []
},
"mp-weixin": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 text-shadow 属性",
"不支持 filter 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 text-shadow 属性",
"不支持 filter 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 10656,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:39.062Z",
"updated_at": "2025-07-31T07:55:39.062Z"
}