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