{
  "id": "JkHuger_dangerous-dolphin-42",
  "name": "dangerous-dolphin-42",
  "category": "loaders",
  "author": "JkHuger",
  "description": "dangerous-dolphin-42 组件 (loader, animation, gradient)",
  "tags": [
    "loader",
    "animation",
    "gradient"
  ],
  "original": {
    "html": "<div class=\"rocket\">\n    <div class=\"rocket-body\">\n      <div class=\"body\"></div>\n      <div class=\"fin fin-left\"></div>\n      <div class=\"fin fin-right\"></div>\n      <div class=\"window\"></div>\n    </div>\n    <div class=\"exhaust-flame\"></div>\n    <ul class=\"exhaust-fumes\">\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n    </ul>\n    <ul class=\"star\">\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n      <li></li>\n    </ul>\n  </div>",
    "css": "/* From Uiverse.io by JkHuger - Tags: loader */\n.rocket {\n  position: absolute;\n  top: 20%;\n  width: 80px;\n  left: calc(50% - 40px);\n}\n\n.rocket .rocket-body {\n  width: 80px;\n  left: calc(50% - 50px);\n  animation: bounce 0.5s infinite;\n}\n\n.rocket .rocket-body .body {\n  background-color: #dadada;\n  height: 180px;\n  left: calc(50% - 50px);\n  border-top-right-radius: 100%;\n  border-top-left-radius: 100%;\n  border-bottom-left-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border-top: 5px solid #f5f5f5;\n}\n\n.rocket .rocket-body:before {\n  content: '';\n  position: absolute;\n  left: calc(50% - 24px);\n  width: 48px;\n  height: 13px;\n  background-color: #554842;\n  bottom: -13px;\n  border-bottom-right-radius: 60%;\n  border-bottom-left-radius: 60%;\n}\n\n.rocket .window {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  border-radius: 100%;\n  background-color: #a75248;\n  left: calc(50% - 25px);\n  top: 40px;\n  border: 5px solid #b4b2b2;\n}\n\n.rocket .fin {\n  position: absolute;\n  z-index: -100;\n  height: 55px;\n  width: 50px;\n  background-color: #a75248;\n}\n\n.rocket .fin-left {\n  left: -30px;\n  top: calc(100% - 55px);\n  border-top-left-radius: 80%;\n  border-bottom-left-radius: 20%;\n}\n\n.rocket .fin-right {\n  right: -30px;\n  top: calc(100% - 55px);\n  border-top-right-radius: 80%;\n  border-bottom-right-radius: 20%;\n}\n\n.rocket .exhaust-flame {\n  position: absolute;\n  top: 90%;\n  width: 28px;\n  background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n  height: 150px;\n  left: calc(50% - 14px);\n  animation: exhaust 0.2s infinite;\n}\n\n.rocket .exhaust-fumes li {\n  width: 60px;\n  height: 60px;\n  background-color: #f5f5f5;\n  list-style: none;\n  position: absolute;\n  border-radius: 100%;\n}\n\n.rocket .exhaust-fumes li:first-child {\n  width: 200px;\n  height: 200px;\n  bottom: -300px;\n  animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(2) {\n  width: 150px;\n  height: 150px;\n  left: -120px;\n  top: 260px;\n  animation: fumes 3.2s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(3) {\n  width: 120px;\n  height: 120px;\n  left: -40px;\n  top: 330px;\n  animation: fumes 3s 1s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(4) {\n  width: 100px;\n  height: 100px;\n  left: -170px;\n  animation: fumes 4s 2s infinite;\n  top: 380px;\n}\n\n.rocket .exhaust-fumes li:nth-child(5) {\n  width: 130px;\n  height: 130px;\n  left: -120px;\n  top: 350px;\n  animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(6) {\n  width: 200px;\n  height: 200px;\n  left: -60px;\n  top: 280px;\n  animation: fumes2 10s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(7) {\n  width: 100px;\n  height: 100px;\n  left: -100px;\n  top: 320px;\n}\n\n.rocket .exhaust-fumes li:nth-child(8) {\n  width: 110px;\n  height: 110px;\n  left: 70px;\n  top: 340px;\n}\n\n.rocket .exhaust-fumes li:nth-child(9) {\n  width: 90px;\n  height: 90px;\n  left: 200px;\n  top: 380px;\n  animation: fumes 20s infinite;\n}\n\n.star li {\n  list-style: none;\n  position: absolute;\n}\n\n.star li:before, .star li:after {\n  content: '';\n  position: absolute;\n  background-color: #f5f5f5;\n}\n\n.star li:before {\n  width: 10px;\n  height: 2px;\n  border-radius: 50%;\n}\n\n.star li:after {\n  height: 8px;\n  width: 2px;\n  left: 4px;\n  top: -3px;\n}\n\n.star li:first-child {\n  top: -30px;\n  left: -210px;\n  animation: twinkle 0.4s infinite;\n}\n\n.star li:nth-child(2) {\n  top: 0;\n  left: 60px;\n  animation: twinkle 0.5s infinite;\n}\n\n.star li:nth-child(2):before {\n  height: 1px;\n  width: 5px;\n}\n\n.star li:nth-child(2):after {\n  width: 1px;\n  height: 5px;\n  top: -2px;\n  left: 2px;\n}\n\n.star li:nth-child(3) {\n  left: 120px;\n  top: 220px;\n  animation: twinkle 1s infinite;\n}\n\n.star li:nth-child(4) {\n  left: -100px;\n  top: 200px;\n  animation: twinkle 0.5s ease infinite;\n}\n\n.star li:nth-child(5) {\n  left: 170px;\n  top: 100px;\n  animation: twinkle 0.4s ease infinite;\n}\n\n.star li:nth-child(6) {\n  top: 87px;\n  left: -79px;\n  animation: twinkle 0.2s infinite;\n}\n\n.star li:nth-child(6):before {\n  height: 1px;\n  width: 5px;\n}\n\n.star li:nth-child(6):after {\n  width: 1px;\n  height: 5px;\n  top: -2px;\n  left: 2px;\n}\n\n@keyframes fumes {\n  50% {\n    transform: scale(1.5);\n    background-color: transparent;\n  }\n\n  51% {\n    transform: scale(0.8);\n  }\n\n  100% {\n    background-color: #f5f5f5;\n    transform: scale(1);\n  }\n}\n\n@keyframes bounce {\n  0% {\n    transform: translate3d(0px, 0px, 0);\n  }\n\n  50% {\n    transform: translate3d(0px, -4px, 0);\n  }\n\n  100% {\n    transform: translate3d(0px, 0px, 0);\n  }\n}\n\n@keyframes exhaust {\n  0% {\n    background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n  }\n\n  50% {\n    background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);\n  }\n\n  75% {\n    background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);\n  }\n}\n\n@keyframes fumes2 {\n  50% {\n    transform: scale(1.1);\n  }\n}\n\n@keyframes twinkle {\n  80% {\n    transform: scale(1.1);\n    opacity: 0.7;\n  }\n}",
    "file_path": "/mnt/persist/workspace/loaders/JkHuger_dangerous-dolphin-42.html"
  },
  "uniapp": {
    "template": "<view class=\"rocket\"></view>\n    <view class=\"rocket-body\"></view>\n      <view class=\"body\"></view>\n      <view class=\"fin fin-left\"></view>\n      <view class=\"fin fin-right\"></view>\n      <view class=\"window\"></view>\n    </div>\n    <view class=\"exhaust-flame\"></view>\n    <view class=\"exhaust-fumes\"></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n    </ul>\n    <view class=\"star\"></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n      <view></view>\n    </ul>\n  </div>",
    "script": "export default {\n  name: 'GalaxyDangerousDolphin42',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by JkHuger - Tags: loader */\n.rocket {\n  position: absolute;\n  top: 20%;\n  width: 160rpx;\n  left: calc(50% - 80rpx);\n}\n\n.rocket .rocket-body {\n  width: 160rpx;\n  left: calc(50% - 100rpx);\n  animation: bounce 0.5s infinite;\n}\n\n.rocket .rocket-body .body {\n  background-color: #dadada;\n  height: 360rpx;\n  left: calc(50% - 100rpx);\n  border-top-right-radius: 100%;\n  border-top-left-radius: 100%;\n  border-bottom-left-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border-top: 10rpx solid #f5f5f5;\n}\n\n.rocket .rocket-body:before {\n  content: '';\n  position: absolute;\n  left: calc(50% - 48rpx);\n  width: 96rpx;\n  height: 26rpx;\n  background-color: #554842;\n  bottom: -26rpx;\n  border-bottom-right-radius: 60%;\n  border-bottom-left-radius: 60%;\n}\n\n.rocket .window {\n  position: absolute;\n  width: 80rpx;\n  height: 80rpx;\n  border-radius: 100%;\n  background-color: #a75248;\n  left: calc(50% - 50rpx);\n  top: 80rpx;\n  border: 10rpx solid #b4b2b2;\n}\n\n.rocket .fin {\n  position: absolute;\n  z-index: -100;\n  height: 110rpx;\n  width: 100rpx;\n  background-color: #a75248;\n}\n\n.rocket .fin-left {\n  left: -60rpx;\n  top: calc(100% - 110rpx);\n  border-top-left-radius: 80%;\n  border-bottom-left-radius: 20%;\n}\n\n.rocket .fin-right {\n  right: -60rpx;\n  top: calc(100% - 110rpx);\n  border-top-right-radius: 80%;\n  border-bottom-right-radius: 20%;\n}\n\n.rocket .exhaust-flame {\n  position: absolute;\n  top: 90%;\n  width: 56rpx;\n  background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n  height: 300rpx;\n  left: calc(50% - 28rpx);\n  animation: exhaust 0.2s infinite;\n}\n\n.rocket .exhaust-fumes li {\n  width: 120rpx;\n  height: 120rpx;\n  background-color: #f5f5f5;\n  list-style: none;\n  position: absolute;\n  border-radius: 100%;\n}\n\n.rocket .exhaust-fumes li:first-child {\n  width: 400rpx;\n  height: 400rpx;\n  bottom: -600rpx;\n  animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(2) {\n  width: 300rpx;\n  height: 300rpx;\n  left: -240rpx;\n  top: 520rpx;\n  animation: fumes 3.2s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(3) {\n  width: 240rpx;\n  height: 240rpx;\n  left: -80rpx;\n  top: 660rpx;\n  animation: fumes 3s 1s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(4) {\n  width: 200rpx;\n  height: 200rpx;\n  left: -340rpx;\n  animation: fumes 4s 2s infinite;\n  top: 760rpx;\n}\n\n.rocket .exhaust-fumes li:nth-child(5) {\n  width: 260rpx;\n  height: 260rpx;\n  left: -240rpx;\n  top: 700rpx;\n  animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(6) {\n  width: 400rpx;\n  height: 400rpx;\n  left: -120rpx;\n  top: 560rpx;\n  animation: fumes2 10s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(7) {\n  width: 200rpx;\n  height: 200rpx;\n  left: -200rpx;\n  top: 640rpx;\n}\n\n.rocket .exhaust-fumes li:nth-child(8) {\n  width: 220rpx;\n  height: 220rpx;\n  left: 140rpx;\n  top: 680rpx;\n}\n\n.rocket .exhaust-fumes li:nth-child(9) {\n  width: 180rpx;\n  height: 180rpx;\n  left: 400rpx;\n  top: 760rpx;\n  animation: fumes 20s infinite;\n}\n\n.star li {\n  list-style: none;\n  position: absolute;\n}\n\n.star li:before, .star li:after {\n  content: '';\n  position: absolute;\n  background-color: #f5f5f5;\n}\n\n.star li:before {\n  width: 20rpx;\n  height: 4rpx;\n  border-radius: 50%;\n}\n\n.star li:after {\n  height: 16rpx;\n  width: 4rpx;\n  left: 8rpx;\n  top: -6rpx;\n}\n\n.star li:first-child {\n  top: -60rpx;\n  left: -420rpx;\n  animation: twinkle 0.4s infinite;\n}\n\n.star li:nth-child(2) {\n  top: 0;\n  left: 120rpx;\n  animation: twinkle 0.5s infinite;\n}\n\n.star li:nth-child(2):before {\n  height: 2rpx;\n  width: 10rpx;\n}\n\n.star li:nth-child(2):after {\n  width: 2rpx;\n  height: 10rpx;\n  top: -4rpx;\n  left: 4rpx;\n}\n\n.star li:nth-child(3) {\n  left: 240rpx;\n  top: 440rpx;\n  animation: twinkle 1s infinite;\n}\n\n.star li:nth-child(4) {\n  left: -200rpx;\n  top: 400rpx;\n  animation: twinkle 0.5s ease infinite;\n}\n\n.star li:nth-child(5) {\n  left: 340rpx;\n  top: 200rpx;\n  animation: twinkle 0.4s ease infinite;\n}\n\n.star li:nth-child(6) {\n  top: 174rpx;\n  left: -158rpx;\n  animation: twinkle 0.2s infinite;\n}\n\n.star li:nth-child(6):before {\n  height: 2rpx;\n  width: 10rpx;\n}\n\n.star li:nth-child(6):after {\n  width: 2rpx;\n  height: 10rpx;\n  top: -4rpx;\n  left: 4rpx;\n}\n\n@keyframes fumes {\n  50% {\n    transform: scale(1.5);\n    background-color: transparent;\n  }\n\n  51% {\n    transform: scale(0.8);\n  }\n\n  100% {\n    background-color: #f5f5f5;\n    transform: scale(1);\n  }\n}\n\n@keyframes bounce {\n  0% {\n    transform: translate3d(0rpx, 0rpx, 0);\n  }\n\n  50% {\n    transform: translate3d(0rpx, -8rpx, 0);\n  }\n\n  100% {\n    transform: translate3d(0rpx, 0rpx, 0);\n  }\n}\n\n@keyframes exhaust {\n  0% {\n    background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n  }\n\n  50% {\n    background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);\n  }\n\n  75% {\n    background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);\n  }\n}\n\n@keyframes fumes2 {\n  50% {\n    transform: scale(1.1);\n  }\n}\n\n@keyframes twinkle {\n  80% {\n    transform: scale(1.1);\n    opacity: 0.7;\n  }\n}\n \n",
    "component_name": "GalaxyDangerousDolphin42"
  },
  "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": [],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 5455,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:39.458Z",
  "updated_at": "2025-07-31T07:55:39.458Z"
}