galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
89 lines • 26.8 kB
JSON
{
"id": "zanina-yassine_tame-wolverine-39",
"name": "tame-wolverine-39",
"category": "loaders",
"author": "zanina-yassine",
"description": "tame-wolverine-39 组件 (loader, animation)",
"tags": [
"loader",
"animation"
],
"original": {
"html": "<div class=\"master-container\">\n <div class=\"container\">\n <div class=\"crescent\">\n <span></span><span></span>\n </div>\n <div class=\"star s1\">\n <span></span><span></span>\n </div>\n <div class=\"star s2\">\n <span></span><span></span>\n </div>\n <div class=\"star s3\">\n <span></span><span></span>\n </div>\n <div class=\"star s4\">\n <span></span><span></span>\n </div>\n <div class=\"star s5\">\n <span></span><span></span>\n </div>\n <div class=\"small-star ss1\">\n <span></span><span></span>\n </div>\n <div class=\"small-star ss2\">\n <span></span><span></span>\n </div>\n <div class=\"small-star ss3\">\n <span></span><span></span>\n </div>\n <div class=\"small-star ss4\">\n <span></span><span></span>\n </div>\n <div class=\"small-star ss5\">\n <span></span><span></span>\n </div>\n <div class=\"small-star ss6\">\n <span></span><span></span>\n </div>\n <div class=\"small-star ss7\">\n <span></span><span></span>\n </div>\n <div class=\"small-star ss8\">\n <span></span><span></span>\n </div>\n <div class=\"hut\">\n <hr>\n <hr>\n <hr>\n <hr>\n <hr>\n <hr>\n <div class=\"doorway\">\n <hr class=\"split\">\n </div>\n </div>\n <div class=\"fire-pit\">\n <div class=\"fire\">\n <div class=\"inner-fire\">\n</div>\n</div>\n <hr class=\"log1\">\n <hr class=\"log2\">\n </div>\n <div class=\"tree one\">\n <hr class=\"trunc\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n </div>\n <div class=\"tree two\">\n <hr class=\"trunc\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n </div>\n <div class=\"tree three\">\n <hr class=\"trunc\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n </div>\n <div class=\"tree four\">\n <hr class=\"trunc\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n </div>\n <div class=\"hill\"></div>\n</div>\n<span class=\"loading-text\">Loading Page.. Please Wait!</span>\n</div>",
"css": "/* From Uiverse.io by zanina-yassine - Tags: loader */\n.master-container {\n margin: 0;\n padding: 20px 40px;\n background-color: #131516;\n display: grid;\n border-radius: 13px;\n border: 1px solid #2c2d2e;\n transform: scale(0.7);\n}\n\n.container {\n width: 300px;\n height: 300px;\n position: relative;\n margin: auto;\n border-radius: 50%;\n border: 2px solid white;\n overflow: hidden;\n}\n\n.crescent {\n position: relative;\n height: 50px;\n width: 50px;\n border-radius: 50%;\n left: calc(50% - 25px);\n top: 12px;\n overflow: hidden;\n animation: rotate 3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.crescent span:nth-child(2) {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n box-shadow: inset 0 0 0 2px white;\n border-radius: 50%;\n}\n\n.crescent span:nth-child(1) {\n background-color: #131516;\n position: absolute;\n left: 40%;\n display: block;\n width: calc(70% - 6px);\n height: calc(70% - 6px);\n box-shadow: inset 0 0 0 2px white;\n border-radius: 50%;\n z-index: 9;\n}\n\n.star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 20px;\n width: 20px;\n}\n\n.star span:nth-child(1)::before {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -3px;\n top: -3px;\n position: absolute;\n}\n\n.star span:nth-child(1)::after {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -3px;\n bottom: -3px;\n position: absolute;\n}\n\n.star span:nth-child(2)::before {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -3px;\n top: -3px;\n position: absolute;\n}\n\n.star span:nth-child(2)::after {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -3px;\n bottom: -3px;\n position: absolute;\n}\n\n.small-star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 12px;\n width: 12px;\n}\n\n.small-star span:nth-child(1)::before {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -2px;\n top: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(1)::after {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -2px;\n bottom: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::before {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -2px;\n top: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::after {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -2px;\n bottom: -2px;\n position: absolute;\n}\n\n.s1 {\n left: 60px;\n top: 50px;\n animation: glow 1.1s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s2 {\n right: 35px;\n bottom: 155px;\n animation: glow 1.3s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s3 {\n left: calc(50% - 10px);\n top: 75px;\n animation: glow 1.5s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s4 {\n left: 35px;\n bottom: 155px;\n animation: glow 3s 0.7s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s5 {\n right: 60px;\n top: 50px;\n animation: glow 2s 1.2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss1 {\n right: 15px;\n bottom: 130px;\n animation: glow 2s 1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss2 {\n left: 15px;\n bottom: 130px;\n animation: glow 1s 0s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss3 {\n left: 35px;\n bottom: 195px;\n animation: glow 1.9s 0.1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss4 {\n right: 35px;\n bottom: 195px;\n animation: glow 1.6s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss5 {\n left: 100px;\n bottom: 180px;\n animation: glow 1s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss6 {\n right: 100px;\n bottom: 180px;\n animation: glow 1.7s 0.6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss7 {\n right: 90px;\n top: 30px;\n animation: glow 0.8s 0.8s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss8 {\n left: 90px;\n top: 30px;\n animation: glow 1.8s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.hill {\n display: block;\n width: 140%;\n height: 100%;\n border: 2px solid white;\n border-radius: 50%;\n bottom: -40%;\n position: relative;\n left: -20%;\n background-size: 3%;\n background-repeat: repeat;\n opacity: 0.7;\n}\n\n.fire-pit {\n width: 18px;\n height: 30px;\n position: absolute;\n left: calc(50% - 9px);\n bottom: 25px;\n z-index: 99;\n}\n\n.fire {\n width: 0;\n height: 0;\n border: 9px solid transparent;\n border-bottom: 18px solid #ffffff;\n position: relative;\n top: -9px;\n}\n\n.fire:after {\n content: \"\";\n position: absolute;\n left: -9px;\n top: 18px;\n width: 0;\n height: 0;\n border: 9px solid transparent;\n border-top: 9px solid #ffffff;\n}\n\n.inner-fire {\n width: 0;\n height: 0;\n border: 4.5px solid transparent;\n border-bottom: 9px solid #131516;\n top: 4.5px;\n position: absolute;\n z-index: 9;\n left: -4.5px;\n}\n\n.inner-fire:after {\n content: \"\";\n position: absolute;\n left: -4.5px;\n top: 9px;\n width: 0;\n height: 0;\n border: 4.5px solid transparent;\n border-top: 6px solid #131516;\n}\n\n.log1 {\n background-color: white;\n height: 2px;\n transform: rotate(35deg);\n transform-origin: center;\n position: relative;\n left: -3px;\n bottom: -1.5px;\n}\n\n.log2 {\n background-color: white;\n height: 2px;\n transform: rotate(-35deg);\n transform-origin: center;\n left: 3px;\n position: relative;\n bottom: -0px;\n}\n\n.hut {\n width: 0;\n height: 0;\n border-left: 38px solid transparent;\n border-right: 38px solid transparent;\n border-bottom: 75px solid #131516;\n position: absolute;\n left: calc(50% - 37.6px);\n z-index: 11;\n bottom: 80px;\n transform: scale(1.3);\n}\n\n.hut hr:nth-child(1) {\n height: 0px;\n position: absolute;\n width: 75px;\n bottom: -75px;\n left: calc(50% - 37.6px);\n}\n\n.hut hr:nth-child(2) {\n height: 0px;\n position: absolute;\n width: 96px;\n bottom: -32px;\n left: -32px;\n transform: rotate(63.5deg);\n border: 1px solid white;\n}\n\n.hut hr:nth-child(3) {\n height: 0px;\n position: absolute;\n width: 96px;\n bottom: -32px;\n right: -32px;\n transform: rotate(-63.5deg);\n border: 1px solid white;\n}\n\n.hut hr:nth-child(4) {\n height: 0px;\n position: absolute;\n width: 60px;\n bottom: -60px;\n left: -30px;\n border: 0.5px solid white;\n}\n\n.hut hr:nth-child(5) {\n height: 0px;\n position: absolute;\n width: 55px;\n bottom: -55px;\n left: -27.5px;\n border: 0.5px solid white;\n}\n\n.hut hr:nth-child(6) {\n height: 0px;\n position: absolute;\n width: 50px;\n bottom: -50px;\n left: -25px;\n border: 0.5px solid white;\n}\n\n.doorway {\n width: 0;\n height: 0;\n border-left: 22px solid transparent;\n border-right: 22px solid transparent;\n border-bottom: 42px solid #131516;\n position: relative;\n left: -22px;\n bottom: -32px;\n}\n\n.doorway::before {\n content: \"\";\n border-left: 1px solid white;\n width: 0px;\n height: 48px;\n display: inline-block;\n transform: rotate(-27deg);\n left: 11px;\n position: absolute;\n bottom: -45px;\n}\n\n.doorway::after {\n content: \"\";\n border-left: 1px solid white;\n width: 0px;\n height: 48px;\n display: inline-block;\n transform: rotate(27deg);\n left: -11px;\n position: absolute;\n bottom: -45px;\n}\n\n.doorway > hr.split {\n height: 44px;\n width: 1px;\n position: absolute;\n left: 0px;\n top: 0;\n display: inline-block;\n background-color: white;\n border: 0;\n}\n\n/* Trees */\n.tree {\n position: absolute;\n width: 25px;\n height: 48px;\n z-index: 21;\n transform: scale(1.3);\n}\n\n.tree .trunc {\n height: 48px;\n width: 1px;\n background-color: white;\n left: 12.5px;\n position: absolute;\n margin-top: 1.5px;\n}\n\n.tree .leaves {\n height: 18px;\n width: 18px;\n transform: rotate(45deg);\n border-left: 1.5px solid white;\n border-top: 1.5px solid white;\n border-bottom: 0;\n border-right: 0;\n margin-bottom: -15px;\n margin-top: 5px;\n left: 4px;\n position: relative;\n}\n\n.one {\n left: 30px;\n bottom: 90px;\n}\n\n.two {\n right: 30px;\n bottom: 90px;\n}\n\n.three {\n left: 80px;\n bottom: 115px;\n}\n\n.four {\n right: 80px;\n bottom: 115px;\n}\n\n.loading-text {\n color: white;\n font-family: 'Inter', sans-serif;\n display: block;\n text-align: center;\n padding: 20px 0 0 0;\n opacity: 0.8;\n}\n\n@keyframes glow {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 50% {\n transform: rotate(10deg);\n }\n\n 100% {\n transform: rota(0);\n }\n}",
"file_path": "/mnt/persist/workspace/loaders/zanina-yassine_tame-wolverine-39.html"
},
"uniapp": {
"template": "<view class=\"master-container\"></view>\n <view class=\"container\"></view>\n <view class=\"crescent\"></view>\n <text></text><text></text>\n </div>\n <view class=\"star s1\"></view>\n <text></text><text></text>\n </div>\n <view class=\"star s2\"></view>\n <text></text><text></text>\n </div>\n <view class=\"star s3\"></view>\n <text></text><text></text>\n </div>\n <view class=\"star s4\"></view>\n <text></text><text></text>\n </div>\n <view class=\"star s5\"></view>\n <text></text><text></text>\n </div>\n <view class=\"small-star ss1\"></view>\n <text></text><text></text>\n </div>\n <view class=\"small-star ss2\"></view>\n <text></text><text></text>\n </div>\n <view class=\"small-star ss3\"></view>\n <text></text><text></text>\n </div>\n <view class=\"small-star ss4\"></view>\n <text></text><text></text>\n </div>\n <view class=\"small-star ss5\"></view>\n <text></text><text></text>\n </div>\n <view class=\"small-star ss6\"></view>\n <text></text><text></text>\n </div>\n <view class=\"small-star ss7\"></view>\n <text></text><text></text>\n </div>\n <view class=\"small-star ss8\"></view>\n <text></text><text></text>\n </div>\n <view class=\"hut\"></view>\n <hr>\n <hr>\n <hr>\n <hr>\n <hr>\n <hr>\n <view class=\"doorway\"></view>\n <hr class=\"split\">\n </div>\n </div>\n <view class=\"fire-pit\"></view>\n <view class=\"fire\"></view>\n <view class=\"inner-fire\"></view>\n</div>\n</div>\n <hr class=\"log1\">\n <hr class=\"log2\">\n </div>\n <view class=\"tree one\"></view>\n <hr class=\"trunc\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n </div>\n <view class=\"tree two\"></view>\n <hr class=\"trunc\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n </div>\n <view class=\"tree three\"></view>\n <hr class=\"trunc\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n </div>\n <view class=\"tree four\"></view>\n <hr class=\"trunc\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n <hr class=\"leaves\">\n </div>\n <view class=\"hill\"></view>\n</div>\n<text class=\"loading-text\">Loading Page.. Please Wait!</text>\n</div>",
"script": "export default {\n name: 'GalaxyTameWolverine39',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by zanina-yassine - Tags: loader */\n.master-container {\n margin: 0;\n padding: 40rpx 80rpx;\n background-color: #131516;\n display: grid;\n border-radius: 26rpx;\n border: 2rpx solid #2c2d2e;\n transform: scale(0.7);\n}\n\n.container {\n width: 600rpx;\n height: 600rpx;\n position: relative;\n margin: auto;\n border-radius: 50%;\n border: 4rpx solid white;\n overflow: hidden;\n}\n\n.crescent {\n position: relative;\n height: 100rpx;\n width: 100rpx;\n border-radius: 50%;\n left: calc(50% - 50rpx);\n top: 24rpx;\n overflow: hidden;\n animation: rotate 3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.crescent span:nth-child(2) {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 0 0 4rpx white;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n border-radius: 50%;\n}\n\n.crescent span:nth-child(1) {\n background-color: #131516;\n position: absolute;\n left: 40%;\n display: block;\n width: calc(70% - 12rpx);\n height: calc(70% - 12rpx);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 0 0 4rpx white;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n border-radius: 50%;\n z-index: 9;\n}\n\n.star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 40rpx;\n width: 40rpx;\n}\n\n.star span:nth-child(1)::before {\n content: \"\";\n border: 4rpx solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -6rpx;\n top: -6rpx;\n position: absolute;\n}\n\n.star span:nth-child(1)::after {\n content: \"\";\n border: 4rpx solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -6rpx;\n bottom: -6rpx;\n position: absolute;\n}\n\n.star span:nth-child(2)::before {\n content: \"\";\n border: 4rpx solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -6rpx;\n top: -6rpx;\n position: absolute;\n}\n\n.star span:nth-child(2)::after {\n content: \"\";\n border: 4rpx solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -6rpx;\n bottom: -6rpx;\n position: absolute;\n}\n\n.small-star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 24rpx;\n width: 24rpx;\n}\n\n.small-star span:nth-child(1)::before {\n content: \"\";\n border: 3rpx solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -4rpx;\n top: -4rpx;\n position: absolute;\n}\n\n.small-star span:nth-child(1)::after {\n content: \"\";\n border: 3rpx solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -4rpx;\n bottom: -4rpx;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::before {\n content: \"\";\n border: 3rpx solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -4rpx;\n top: -4rpx;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::after {\n content: \"\";\n border: 3rpx solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -4rpx;\n bottom: -4rpx;\n position: absolute;\n}\n\n.s1 {\n left: 120rpx;\n top: 100rpx;\n animation: glow 1.1s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s2 {\n right: 70rpx;\n bottom: 310rpx;\n animation: glow 1.3s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s3 {\n left: calc(50% - 20rpx);\n top: 150rpx;\n animation: glow 1.5s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s4 {\n left: 70rpx;\n bottom: 310rpx;\n animation: glow 3s 0.7s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s5 {\n right: 120rpx;\n top: 100rpx;\n animation: glow 2s 1.2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss1 {\n right: 30rpx;\n bottom: 260rpx;\n animation: glow 2s 1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss2 {\n left: 30rpx;\n bottom: 260rpx;\n animation: glow 1s 0s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss3 {\n left: 70rpx;\n bottom: 390rpx;\n animation: glow 1.9s 0.1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss4 {\n right: 70rpx;\n bottom: 390rpx;\n animation: glow 1.6s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss5 {\n left: 200rpx;\n bottom: 360rpx;\n animation: glow 1s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss6 {\n right: 200rpx;\n bottom: 360rpx;\n animation: glow 1.7s 0.6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss7 {\n right: 180rpx;\n top: 60rpx;\n animation: glow 0.8s 0.8s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss8 {\n left: 180rpx;\n top: 60rpx;\n animation: glow 1.8s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.hill {\n display: block;\n width: 140%;\n height: 100%;\n border: 4rpx solid white;\n border-radius: 50%;\n bottom: -40%;\n position: relative;\n left: -20%;\n background-size: 3%;\n background-repeat: repeat;\n opacity: 0.7;\n}\n\n.fire-pit {\n width: 36rpx;\n height: 60rpx;\n position: absolute;\n left: calc(50% - 18rpx);\n bottom: 50rpx;\n z-index: 99;\n}\n\n.fire {\n width: 0;\n height: 0;\n border: 18rpx solid transparent;\n border-bottom: 36rpx solid #ffffff;\n position: relative;\n top: -18rpx;\n}\n\n.fire:after {\n content: \"\";\n position: absolute;\n left: -18rpx;\n top: 36rpx;\n width: 0;\n height: 0;\n border: 18rpx solid transparent;\n border-top: 18rpx solid #ffffff;\n}\n\n.inner-fire {\n width: 0;\n height: 0;\n border: 9rpx solid transparent;\n border-bottom: 18rpx solid #131516;\n top: 9rpx;\n position: absolute;\n z-index: 9;\n left: -9rpx;\n}\n\n.inner-fire:after {\n content: \"\";\n position: absolute;\n left: -9rpx;\n top: 18rpx;\n width: 0;\n height: 0;\n border: 9rpx solid transparent;\n border-top: 12rpx solid #131516;\n}\n\n.log1 {\n background-color: white;\n height: 4rpx;\n transform: rotate(35deg);\n transform-origin: center;\n position: relative;\n left: -6rpx;\n bottom: -3rpx;\n}\n\n.log2 {\n background-color: white;\n height: 4rpx;\n transform: rotate(-35deg);\n transform-origin: center;\n left: 6rpx;\n position: relative;\n bottom: -0rpx;\n}\n\n.hut {\n width: 0;\n height: 0;\n border-left: 76rpx solid transparent;\n border-right: 76rpx solid transparent;\n border-bottom: 150rpx solid #131516;\n position: absolute;\n left: calc(50% - 75.2rpx);\n z-index: 11;\n bottom: 160rpx;\n transform: scale(1.3);\n}\n\n.hut hr:nth-child(1) {\n height: 0rpx;\n position: absolute;\n width: 150rpx;\n bottom: -150rpx;\n left: calc(50% - 75.2rpx);\n}\n\n.hut hr:nth-child(2) {\n height: 0rpx;\n position: absolute;\n width: 192rpx;\n bottom: -64rpx;\n left: -64rpx;\n transform: rotate(63.5deg);\n border: 2rpx solid white;\n}\n\n.hut hr:nth-child(3) {\n height: 0rpx;\n position: absolute;\n width: 192rpx;\n bottom: -64rpx;\n right: -64rpx;\n transform: rotate(-63.5deg);\n border: 2rpx solid white;\n}\n\n.hut hr:nth-child(4) {\n height: 0rpx;\n position: absolute;\n width: 120rpx;\n bottom: -120rpx;\n left: -60rpx;\n border: 1rpx solid white;\n}\n\n.hut hr:nth-child(5) {\n height: 0rpx;\n position: absolute;\n width: 110rpx;\n bottom: -110rpx;\n left: -55rpx;\n border: 1rpx solid white;\n}\n\n.hut hr:nth-child(6) {\n height: 0rpx;\n position: absolute;\n width: 100rpx;\n bottom: -100rpx;\n left: -50rpx;\n border: 1rpx solid white;\n}\n\n.doorway {\n width: 0;\n height: 0;\n border-left: 44rpx solid transparent;\n border-right: 44rpx solid transparent;\n border-bottom: 84rpx solid #131516;\n position: relative;\n left: -44rpx;\n bottom: -64rpx;\n}\n\n.doorway::before {\n content: \"\";\n border-left: 2rpx solid white;\n width: 0rpx;\n height: 96rpx;\n display: inline-block;\n transform: rotate(-27deg);\n left: 22rpx;\n position: absolute;\n bottom: -90rpx;\n}\n\n.doorway::after {\n content: \"\";\n border-left: 2rpx solid white;\n width: 0rpx;\n height: 96rpx;\n display: inline-block;\n transform: rotate(27deg);\n left: -22rpx;\n position: absolute;\n bottom: -90rpx;\n}\n\n.doorway > hr.split {\n height: 88rpx;\n width: 2rpx;\n position: absolute;\n left: 0rpx;\n top: 0;\n display: inline-block;\n background-color: white;\n border: 0;\n}\n\n/* Trees */\n.tree {\n position: absolute;\n width: 50rpx;\n height: 96rpx;\n z-index: 21;\n transform: scale(1.3);\n}\n\n.tree .trunc {\n height: 96rpx;\n width: 2rpx;\n background-color: white;\n left: 25rpx;\n position: absolute;\n margin-top: 3rpx;\n}\n\n.tree .leaves {\n height: 36rpx;\n width: 36rpx;\n transform: rotate(45deg);\n border-left: 3rpx solid white;\n border-top: 3rpx solid white;\n border-bottom: 0;\n border-right: 0;\n margin-bottom: -30rpx;\n margin-top: 10rpx;\n left: 8rpx;\n position: relative;\n}\n\n.one {\n left: 60rpx;\n bottom: 180rpx;\n}\n\n.two {\n right: 60rpx;\n bottom: 180rpx;\n}\n\n.three {\n left: 160rpx;\n bottom: 230rpx;\n}\n\n.four {\n right: 160rpx;\n bottom: 230rpx;\n}\n\n.loading-text {\n color: white;\n font-family: 'Inter', sans-serif;\n display: block;\n text-align: center;\n padding: 40rpx 0 0 0;\n opacity: 0.8;\n}\n\n@keyframes glow {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 50% {\n transform: rotate(10deg);\n }\n\n 100% {\n transform: rota(0);\n }\n}\n",
"component_name": "GalaxyTameWolverine39"
},
"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 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 box-shadow 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 11324,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:42.880Z",
"updated_at": "2025-07-31T07:55:42.880Z"
}