galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
95 lines • 32 kB
JSON
{
"id": "Admin12121_black-sheep-17",
"name": "black-sheep-17",
"category": "loaders",
"author": "Admin12121",
"description": "black-sheep-17 组件 (3d, loader, effect loader, loading animation, animation, gradient)",
"tags": [
"3d",
"loader",
"effect loader",
"loading animation",
"animation",
"gradient"
],
"original": {
"html": "<div class=\"loader\">\n <div class=\"box box0\">\n <div></div>\n </div>\n <div class=\"box box1\">\n <div></div>\n </div>\n <div class=\"box box2\">\n <div></div>\n </div>\n <div class=\"box box3\">\n <div></div>\n </div>\n <div class=\"box box4\">\n <div></div>\n </div>\n <div class=\"box box5\">\n <div></div>\n </div>\n <div class=\"box box6\">\n <div></div>\n </div>\n <div class=\"box box7\">\n <div></div>\n </div>\n <div class=\"ground\">\n <div></div>\n </div>\n</div>",
"css": "/* From Uiverse.io by Admin12121 - Tags: 3d, loader, effect loader, loading animation */\n.loader {\n --duration: 3s;\n --primary: rgba(39, 94, 254, 1);\n --primary-light: #2f71ff;\n --primary-rgba: rgba(39, 94, 254, 0);\n width: 200px;\n height: 320px;\n position: relative;\n transform-style: preserve-3d;\n}\n\n@media (max-width: 480px) {\n .loader {\n zoom: 0.44;\n }\n}\n\n.loader:before, .loader:after {\n --r: 20.5deg;\n content: \"\";\n width: 320px;\n height: 140px;\n position: absolute;\n right: 32%;\n bottom: -11px;\n/* change the back groung color on switching from light to dark mood */\n background: #e8e8e8;\n transform: translateZ(200px) rotate(var(--r));\n -webkit-animation: mask var(--duration) linear forwards infinite;\n animation: mask var(--duration) linear forwards infinite;\n}\n\n.loader:after {\n --r: -20.5deg;\n right: auto;\n left: 32%;\n}\n\n.loader .ground {\n position: absolute;\n left: -50px;\n bottom: -120px;\n transform-style: preserve-3d;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n}\n\n.loader .ground div {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n width: 200px;\n height: 200px;\n background: var(--primary);\n background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);\n transform-style: preserve-3d;\n -webkit-animation: ground var(--duration) linear forwards infinite;\n animation: ground var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:before, .loader .ground div:after {\n --rx: 90deg;\n --ry: 0deg;\n --x: 44px;\n --y: 162px;\n --z: -50px;\n content: \"\";\n width: 156px;\n height: 300px;\n opacity: 0;\n background: linear-gradient(var(--primary), var(--primary-rgba));\n position: absolute;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n -webkit-animation: ground-shine var(--duration) linear forwards infinite;\n animation: ground-shine var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:after {\n --rx: 90deg;\n --ry: 90deg;\n --x: 0;\n --y: 177px;\n --z: 150px;\n}\n\n.loader .box {\n --x: 0;\n --y: 0;\n position: absolute;\n -webkit-animation: var(--duration) linear forwards infinite;\n animation: var(--duration) linear forwards infinite;\n transform: translate(var(--x), var(--y));\n}\n\n.loader .box div {\n background-color: var(--primary);\n width: 48px;\n height: 48px;\n position: relative;\n transform-style: preserve-3d;\n -webkit-animation: var(--duration) ease forwards infinite;\n animation: var(--duration) ease forwards infinite;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n}\n\n.loader .box div:before, .loader .box div:after {\n --rx: 90deg;\n --ry: 0deg;\n --z: 24px;\n --y: -24px;\n --x: 0;\n content: \"\";\n position: absolute;\n background-color: inherit;\n width: inherit;\n height: inherit;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n filter: brightness(var(--b, 1.2));\n}\n\n.loader .box div:after {\n --rx: 0deg;\n --ry: 90deg;\n --x: 24px;\n --y: 0;\n --b: 1.4;\n}\n\n.loader .box.box0 {\n --x: -220px;\n --y: -120px;\n left: 58px;\n top: 108px;\n}\n\n.loader .box.box1 {\n --x: -260px;\n --y: 120px;\n left: 25px;\n top: 120px;\n}\n\n.loader .box.box2 {\n --x: 120px;\n --y: -190px;\n left: 58px;\n top: 64px;\n}\n\n.loader .box.box3 {\n --x: 280px;\n --y: -40px;\n left: 91px;\n top: 120px;\n}\n\n.loader .box.box4 {\n --x: 60px;\n --y: 200px;\n left: 58px;\n top: 132px;\n}\n\n.loader .box.box5 {\n --x: -220px;\n --y: -120px;\n left: 25px;\n top: 76px;\n}\n\n.loader .box.box6 {\n --x: -260px;\n --y: 120px;\n left: 91px;\n top: 76px;\n}\n\n.loader .box.box7 {\n --x: -240px;\n --y: 200px;\n left: 58px;\n top: 87px;\n}\n\n.loader .box0 {\n -webkit-animation-name: box-move0;\n animation-name: box-move0;\n}\n\n.loader .box0 div {\n -webkit-animation-name: box-scale0;\n animation-name: box-scale0;\n}\n\n.loader .box1 {\n -webkit-animation-name: box-move1;\n animation-name: box-move1;\n}\n\n.loader .box1 div {\n -webkit-animation-name: box-scale1;\n animation-name: box-scale1;\n}\n\n.loader .box2 {\n -webkit-animation-name: box-move2;\n animation-name: box-move2;\n}\n\n.loader .box2 div {\n -webkit-animation-name: box-scale2;\n animation-name: box-scale2;\n}\n\n.loader .box3 {\n -webkit-animation-name: box-move3;\n animation-name: box-move3;\n}\n\n.loader .box3 div {\n -webkit-animation-name: box-scale3;\n animation-name: box-scale3;\n}\n\n.loader .box4 {\n -webkit-animation-name: box-move4;\n animation-name: box-move4;\n}\n\n.loader .box4 div {\n -webkit-animation-name: box-scale4;\n animation-name: box-scale4;\n}\n\n.loader .box5 {\n -webkit-animation-name: box-move5;\n animation-name: box-move5;\n}\n\n.loader .box5 div {\n -webkit-animation-name: box-scale5;\n animation-name: box-scale5;\n}\n\n.loader .box6 {\n -webkit-animation-name: box-move6;\n animation-name: box-move6;\n}\n\n.loader .box6 div {\n -webkit-animation-name: box-scale6;\n animation-name: box-scale6;\n}\n\n.loader .box7 {\n -webkit-animation-name: box-move7;\n animation-name: box-move7;\n}\n\n.loader .box7 div {\n -webkit-animation-name: box-scale7;\n animation-name: box-scale7;\n}\n\n@-webkit-keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@-webkit-keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@-webkit-keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n\n@keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}",
"file_path": "/mnt/persist/workspace/loaders/Admin12121_black-sheep-17.html"
},
"uniapp": {
"template": "<view class=\"loader\"></view>\n <view class=\"box box0\"></view>\n <view></view>\n </div>\n <view class=\"box box1\"></view>\n <view></view>\n </div>\n <view class=\"box box2\"></view>\n <view></view>\n </div>\n <view class=\"box box3\"></view>\n <view></view>\n </div>\n <view class=\"box box4\"></view>\n <view></view>\n </div>\n <view class=\"box box5\"></view>\n <view></view>\n </div>\n <view class=\"box box6\"></view>\n <view></view>\n </div>\n <view class=\"box box7\"></view>\n <view></view>\n </div>\n <view class=\"ground\"></view>\n <view></view>\n </div>\n</div>",
"script": "export default {\n name: 'GalaxyBlackSheep17',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by Admin12121 - Tags: 3d, loader, effect loader, loading animation */\n.loader {\n --duration: 3s;\n --primary: rgba(39, 94, 254, 1);\n --primary-light: #2f71ff;\n --primary-rgba: rgba(39, 94, 254, 0);\n width: 400rpx;\n height: 640rpx;\n position: relative;\n transform-style: preserve-3d;\n}\n\n@media (max-width: 960rpx) {\n .loader {\n zoom: 0.44;\n }\n}\n\n.loader:before, .loader:after {\n --r: 20.5deg;\n content: \"\";\n width: 640rpx;\n height: 280rpx;\n position: absolute;\n right: 32%;\n bottom: -22rpx;\n/* change the back groung color on switching from light to dark mood */\n background: #e8e8e8;\n transform: translateZ(400rpx) rotate(var(--r));\n -webkit-animation: mask var(--duration) linear forwards infinite;\n animation: mask var(--duration) linear forwards infinite;\n}\n\n.loader:after {\n --r: -20.5deg;\n right: auto;\n left: 32%;\n}\n\n.loader .ground {\n position: absolute;\n left: -100rpx;\n bottom: -240rpx;\n transform-style: preserve-3d;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n}\n\n.loader .ground div {\n transform: rotateX(90deg) rotateY(0deg) translate(-96rpx, -240rpx) translateZ(200rpx) scale(0);\n width: 400rpx;\n height: 400rpx;\n background: var(--primary);\n background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);\n transform-style: preserve-3d;\n -webkit-animation: ground var(--duration) linear forwards infinite;\n animation: ground var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:before, .loader .ground div:after {\n --rx: 90deg;\n --ry: 0deg;\n --x: 88rpx;\n --y: 324rpx;\n --z: -100rpx;\n content: \"\";\n width: 312rpx;\n height: 600rpx;\n opacity: 0;\n background: linear-gradient(var(--primary), var(--primary-rgba));\n position: absolute;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n -webkit-animation: ground-shine var(--duration) linear forwards infinite;\n animation: ground-shine var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:after {\n --rx: 90deg;\n --ry: 90deg;\n --x: 0;\n --y: 354rpx;\n --z: 300rpx;\n}\n\n.loader .box {\n --x: 0;\n --y: 0;\n position: absolute;\n -webkit-animation: var(--duration) linear forwards infinite;\n animation: var(--duration) linear forwards infinite;\n transform: translate(var(--x), var(--y));\n}\n\n.loader .box div {\n background-color: var(--primary);\n width: 96rpx;\n height: 96rpx;\n position: relative;\n transform-style: preserve-3d;\n -webkit-animation: var(--duration) ease forwards infinite;\n animation: var(--duration) ease forwards infinite;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n}\n\n.loader .box div:before, .loader .box div:after {\n --rx: 90deg;\n --ry: 0deg;\n --z: 48rpx;\n --y: -48rpx;\n --x: 0;\n content: \"\";\n position: absolute;\n background-color: inherit;\n width: inherit;\n height: inherit;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n \n}\n\n.loader .box div:after {\n --rx: 0deg;\n --ry: 90deg;\n --x: 48rpx;\n --y: 0;\n --b: 1.4;\n}\n\n.loader .box.box0 {\n --x: -440rpx;\n --y: -240rpx;\n left: 116rpx;\n top: 216rpx;\n}\n\n.loader .box.box1 {\n --x: -520rpx;\n --y: 240rpx;\n left: 50rpx;\n top: 240rpx;\n}\n\n.loader .box.box2 {\n --x: 240rpx;\n --y: -380rpx;\n left: 116rpx;\n top: 128rpx;\n}\n\n.loader .box.box3 {\n --x: 560rpx;\n --y: -80rpx;\n left: 182rpx;\n top: 240rpx;\n}\n\n.loader .box.box4 {\n --x: 120rpx;\n --y: 400rpx;\n left: 116rpx;\n top: 264rpx;\n}\n\n.loader .box.box5 {\n --x: -440rpx;\n --y: -240rpx;\n left: 50rpx;\n top: 152rpx;\n}\n\n.loader .box.box6 {\n --x: -520rpx;\n --y: 240rpx;\n left: 182rpx;\n top: 152rpx;\n}\n\n.loader .box.box7 {\n --x: -480rpx;\n --y: 400rpx;\n left: 116rpx;\n top: 174rpx;\n}\n\n.loader .box0 {\n -webkit-animation-name: box-move0;\n animation-name: box-move0;\n}\n\n.loader .box0 div {\n -webkit-animation-name: box-scale0;\n animation-name: box-scale0;\n}\n\n.loader .box1 {\n -webkit-animation-name: box-move1;\n animation-name: box-move1;\n}\n\n.loader .box1 div {\n -webkit-animation-name: box-scale1;\n animation-name: box-scale1;\n}\n\n.loader .box2 {\n -webkit-animation-name: box-move2;\n animation-name: box-move2;\n}\n\n.loader .box2 div {\n -webkit-animation-name: box-scale2;\n animation-name: box-scale2;\n}\n\n.loader .box3 {\n -webkit-animation-name: box-move3;\n animation-name: box-move3;\n}\n\n.loader .box3 div {\n -webkit-animation-name: box-scale3;\n animation-name: box-scale3;\n}\n\n.loader .box4 {\n -webkit-animation-name: box-move4;\n animation-name: box-move4;\n}\n\n.loader .box4 div {\n -webkit-animation-name: box-scale4;\n animation-name: box-scale4;\n}\n\n.loader .box5 {\n -webkit-animation-name: box-move5;\n animation-name: box-move5;\n}\n\n.loader .box5 div {\n -webkit-animation-name: box-scale5;\n animation-name: box-scale5;\n}\n\n.loader .box6 {\n -webkit-animation-name: box-move6;\n animation-name: box-move6;\n}\n\n.loader .box6 div {\n -webkit-animation-name: box-scale6;\n animation-name: box-scale6;\n}\n\n.loader .box7 {\n -webkit-animation-name: box-move7;\n animation-name: box-move7;\n}\n\n.loader .box7 div {\n -webkit-animation-name: box-scale7;\n animation-name: box-scale7;\n}\n\n@-webkit-keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@-webkit-keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@-webkit-keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@-webkit-keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@-webkit-keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@-webkit-keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@-webkit-keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@-webkit-keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -64rpx);\n }\n\n 90%, 100% {\n transform: translate(0, 376rpx);\n }\n}\n\n@-webkit-keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-96rpx, -240rpx) translateZ(200rpx) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-96rpx, -240rpx) translateZ(200rpx) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-96rpx, -240rpx) translateZ(200rpx) scale(0);\n }\n}\n\n@keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-96rpx, -240rpx) translateZ(200rpx) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-96rpx, -240rpx) translateZ(200rpx) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-96rpx, -240rpx) translateZ(200rpx) scale(0);\n }\n}\n\n@-webkit-keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@-webkit-keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n\n@keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n\n",
"component_name": "GalaxyBlackSheep17"
},
"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": [
"不支持 filter 属性",
"不支持 mask 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 filter 属性",
"不支持 mask 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 14011,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:38.841Z",
"updated_at": "2025-07-31T07:55:38.841Z"
}