{
  "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"
}