{
  "id": "csemszepp_happy-dog-58",
  "name": "happy-dog-58",
  "category": "loaders",
  "author": "csemszepp",
  "description": "happy-dog-58 组件 (loader, animated, #darthvader, animation, gradient, interactive)",
  "tags": [
    "loader",
    "animated",
    "#darthvader",
    "animation",
    "gradient",
    "interactive"
  ],
  "original": {
    "html": "<div class=\"vader\">\n<div class=\"shadow\"></div>\n<div class=\"head\"><div class=\"helmet\"><span class=\"left\"></span><span class=\"right\"></span></div><div class=\"eyes\"><span class=\"left\"></span><span class=\"right\"></span></div><span class=\"grill\"><span class=\"left\"></span><span class=\"center\"></span><span class=\"right\"></span></span><span class=\"mask\"><span class=\"top\"></span><span class=\"left\"></span><span class=\"center\"></span><span class=\"right\"></span></span><span class=\"line\"></span></div>\n<div class=\"torso\"><span class=\"neck\"><span class=\"left\"></span><span class=\"center\"></span><span class=\"right\"></span><span class=\"bottom\"></span></span><span class=\"belt\"><span class=\"center\"></span></span><div class=\"plate\"><span class=\"red_top\"></span><span class=\"red_center\"></span><span class=\"red_bottom\"></span><span class=\"blue\"></span><span class=\"gray\"></span></div></div>\n<div class=\"hand left\"><span class=\"hand\"></span></div>\n<div class=\"hand right animation-right\"><span class=\"hand\"></span></div>\n<div class=\"legs\"><span class=\"left\"></span><span class=\"right\"></span></div>\n<div class=\"boots\"><span class=\"left\"></span><span class=\"right\"></span></div>\n<div class=\"sword animation-left\"><span class=\"handle\"></span><span class=\"light\"></span></div>\n</div>\n<p class=\"text\">Darth Vader By <a href=\"https://codepen.io/poziomq\">qpoziomek</a></p>",
    "css": "/* From Uiverse.io by csemszepp - Source: https://codepen.io/poziomq/details/Lbyomj - Tags: loader, animated, #darthvader */\n::-moz-selection {\n  background: #2D3363;\n  color: #FAEECF\n}\n\n::selection {\n  background: #2D3363;\n  color: #FAEECF\n}\n\n.text {\n  position: absolute;\n  bottom: 20px;\n  left: 25px;\n  color: black;\n  font-family: Arial,sans-serif;\n  text-transform: uppercase;\n  font-size: 14px;\n  line-height: 28px;\n  font-weight: bold;\n  letter-spacing: 2px;\n  z-index: 99\n}\n\na {\n  color: #6172BA;\n  text-decoration: none;\n  cursor: pointer\n}\n\na:hover {\n  text-decoration: underline\n}\n\n.vader {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-block;\n  -webkit-transform: translate(-50%,-50%);\n  transform: translate(-50%,-50%)\n}\n\n.vader .head {\n  position: relative;\n  width: 100px;\n  height: 100px;\n  margin-bottom: -10px;\n  z-index: 1\n}\n\n.vader .helmet {\n  position: absolute;\n  top: 0;\n  left: 5px;\n  width: 90px;\n  height: 80px;\n  background: #222222;\n  border-radius: 80px 80px 0 0\n}\n\n.vader .helmet::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 50px;\n  height: 8px;\n  margin-left: -25px;\n  background: #040507;\n  border-radius: 25px 25px 0 0 / 8px 8px 0 0\n}\n\n.vader .helmet::after {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  margin-left: -25px;\n  height: 0;\n  width: 0;\n  border-left: 25px solid transparent;\n  border-right: 25px solid transparent;\n  border-top: 24px solid #040507\n}\n\n.vader .helmet span {\n  position: absolute;\n  top: 50%;\n  width: 35px;\n  height: 55px;\n  background: #040507\n}\n\n.vader .helmet .left {\n  left: -6px;\n  -webkit-transform: rotate(25deg);\n  transform: rotate(25deg)\n}\n\n.vader .helmet .right {\n  right: -6px;\n  -webkit-transform: rotate(-25deg);\n  transform: rotate(-25deg)\n}\n\n.vader .helmet span::before {\n  content: '';\n  position: absolute;\n  top: -5px;\n  width: 8px;\n  height: 55px;\n  background: #222222\n}\n\n.vader .helmet .left::before {\n  left: 0\n}\n\n.vader .helmet .right::before {\n  right: 0\n}\n\n.vader .line {\n  position: absolute;\n  top: -3px;\n  left: 50%;\n  width: 6px;\n  height: 38px;\n  margin-left: -3px;\n  background: #343434\n}\n\n.vader .line::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  left: -4px;\n  bottom: 0;\n  width: 4px;\n  height: 12px;\n  background: #040507\n}\n\n.vader .line::after {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  right: -4px;\n  bottom: 0;\n  width: 4px;\n  height: 12px;\n  background: #040507\n}\n\n.vader .mask {\n  position: absolute;\n  bottom: 19px;\n  left: 50%\n}\n\n.vader .mask span {\n  position: absolute;\n  top: 0;\n  width: 4px;\n  height: 4px;\n  border-radius: 1px;\n  background: #C6C6C6\n}\n\n.vader .mask .top {\n  left: 50%;\n  margin-top: -16px;\n  margin-left: -2px\n}\n\n.vader .mask .top::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  left: -7px;\n  top: -2px;\n  width: 4px;\n  height: 24px;\n  background: #040507;\n  border-radius: 4px;\n  -webkit-transform: rotate(40deg);\n  transform: rotate(40deg)\n}\n\n.vader .mask .top::after {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  right: -7px;\n  top: -2px;\n  width: 4px;\n  height: 24px;\n  background: #040507;\n  border-radius: 4px;\n  -webkit-transform: rotate(-40deg);\n  transform: rotate(-40deg)\n}\n\n.vader .mask .left {\n  left: 12px\n}\n\n.vader .mask .center {\n  left: 50%;\n  margin-top: -16px;\n  margin-left: -2px\n}\n\n.vader .mask .right {\n  right: 12px\n}\n\n.vader .grill {\n  position: absolute;\n  bottom: 20px;\n  left: 50%;\n  width: 20px;\n  margin-left: -10px\n}\n\n.vader .grill span {\n  position: absolute;\n  bottom: -5px;\n  width: 2px;\n  margin-left: -1px;\n  background: #C6C6C6\n}\n\n.vader .grill .left {\n  left: 4px;\n  height: 10px\n}\n\n.vader .grill .center {\n  left: 50%;\n  height: 17px\n}\n\n.vader .grill .right {\n  right: 2px;\n  height: 10px\n}\n\n.vader .eyes {\n  position: absolute;\n  top: 35px;\n  left: 10px;\n  width: 80px;\n  height: 40px;\n  border-radius: 40px;\n  background: #343434\n}\n\n.vader .eyes::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  top: 33px;\n  left: 5px;\n  height: 0;\n  width: 0;\n  border-left: 35px solid transparent;\n  border-right: 35px solid transparent;\n  border-top: 30px solid #343434\n}\n\n.vader .eyes span {\n  position: absolute;\n  top: 5px;\n  width: 30px;\n  height: 30px;\n  border-radius: 30px;\n  background: #010000;\n  -webkit-transition: background .3s ease-in-out;\n  transition: background .3s ease-in-out\n}\n\n.vader .eyes .left {\n  left: 7px\n}\n\n.vader .eyes .right {\n  right: 7px\n}\n\n.vader .torso {\n  position: relative;\n  width: 60px;\n  height: 80px;\n  border-radius: 50px 50px 0 0;\n  margin: 0 auto;\n  background: #222222\n}\n\n.vader .torso::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  left: -20px;\n  top: -15px;\n  width: 100px;\n  height: 115px;\n  border-radius: 50px 50px 0 0;\n  margin: 0 auto;\n  background: #040507;\n  z-index: -1\n}\n\n.vader .belt {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 10px;\n  background: #040507\n}\n\n.vader .belt span::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 20px;\n  height: 10px;\n  border-radius: 10px;\n  margin-left: -10px;\n  background: #C6C6C6\n}\n\n.vader .neck {\n  position: absolute;\n  left: 6px;\n  top: 3px;\n  width: 48px;\n  height: 8px;\n  background: #010000;\n  z-index: 5\n}\n\n.vader .neck::before {\n  content: '';\n  position: absolute;\n  top: -8px;\n  left: 8px;\n  width: 32px;\n  height: 10px;\n  background: #222222;\n  border-radius: 0 0 4px 4px\n}\n\n.vader .neck::after {\n  content: '';\n  position: absolute;\n  top: -8px;\n  left: 8px;\n  width: 32px;\n  height: 1px;\n  background: #666666\n}\n\n.vader .neck span {\n  position: absolute;\n  top: 0;\n  width: 6px;\n  height: 125%;\n  margin-left: -3px;\n  background: #434343\n}\n\n.vader .neck .left {\n  left: 6px;\n  -webkit-transform: rotate(30deg);\n  transform: rotate(30deg);\n  border-radius: 5px 0 0 0\n}\n\n.vader .neck .center {\n  left: 50%;\n  top: 2px\n}\n\n.vader .neck .right {\n  right: 3px;\n  -webkit-transform: rotate(-30deg);\n  transform: rotate(-30deg);\n  border-radius: 0 5px 0 0\n}\n\n.vader .neck .bottom {\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  width: 46px;\n  height: 5px;\n  background: #222222\n}\n\n.vader .plate {\n  position: absolute;\n  left: 15px;\n  top: 25px;\n  width: 30px;\n  height: 32px;\n  background: #343434\n}\n\n.vader .plate .red_top {\n  position: absolute;\n  left: 2px;\n  top: 2px;\n  width: 12px;\n  height: 18px;\n  background: #d81f27\n}\n\n.vader .plate .red_top::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 5px;\n  background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_top::after {\n  content: '';\n  position: absolute;\n  bottom: 5px;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background: #343434\n}\n\n.vader .plate .red_center {\n  position: absolute;\n  right: 2px;\n  top: 12px;\n  width: 12px;\n  height: 8px;\n  background: #d81f27\n}\n\n.vader .plate .red_center::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 4px;\n  width: 100%;\n  height: 4px;\n  background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_center::after {\n  content: '';\n  position: absolute;\n  left: 5px;\n  top: 0;\n  width: 2px;\n  height: 100%;\n  background: #343434\n}\n\n.vader .plate .red_bottom {\n  position: absolute;\n  right: 2px;\n  bottom: 2px;\n  width: 4px;\n  height: 8px;\n  background: #d81f27\n}\n\n.vader .plate .blue {\n  position: absolute;\n  right: 2px;\n  top: 2px;\n  width: 12px;\n  height: 8px;\n  background: #455caa\n}\n\n.vader .plate .blue::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background: #343434\n}\n\n.vader .plate .gray {\n  position: absolute;\n  left: 2px;\n  bottom: 2px;\n  width: 20px;\n  height: 8px;\n  background: #9f9fa1\n}\n\n.vader .plate .gray::before {\n  content: '';\n  position: absolute;\n  left: 5px;\n  top: 0;\n  width: 2px;\n  height: 100%;\n  background: #343434\n}\n\n.vader .plate .gray::after {\n  content: '';\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 8px;\n  height: 100%;\n  background: rgba(0,0,0,0.2)\n}\n\n.vader .legs {\n  position: relative;\n  width: 50px;\n  height: 20px;\n  margin: 0 auto;\n  background: #222222\n}\n\n.vader .legs::before {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  width: 20px;\n  height: 100%;\n  margin-left: -10px;\n  background: #040507\n}\n\n.vader .boots {\n  position: absolute;\n  bottom: 0;\n  left: 50%\n}\n\n.vader .boots span {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  top: 0;\n  width: 30px;\n  height: 10px;\n  background: #040507\n}\n\n.vader .boots .left {\n  left: 10px;\n  border-radius: 0 15px 0 0\n}\n\n.vader .boots .right {\n  right: 10px;\n  border-radius: 15px 0 0 0\n}\n\n.vader .hand {\n  position: absolute;\n  top: 60%;\n  z-index: 2\n}\n\n.vader .hand.left {\n  left: -2px;\n  top: 82%\n}\n\n.vader .hand.right {\n  right: -20px\n}\n\n.vader .hand .hand {\n  position: absolute;\n  top: 0;\n  width: 11px;\n  height: 22px;\n  margin-top: -12px;\n  margin-left: -12px;\n  background: #040507\n}\n\n.vader .hand.left .hand {\n  left: 0;\n  border-radius: 22px 0 0 22px\n}\n\n.vader .hand.right .hand {\n  right: 0;\n  width: 22px;\n  border-radius: 22px\n}\n\n.vader .sword {\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  z-index: 10\n}\n\n.vader .sword .handle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 6px;\n  height: 30px;\n  margin-left: -3px;\n  background: #343434\n}\n\n.vader .sword .handle::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 5px;\n  width: 100%;\n  height: 5px;\n  background: #888888\n}\n\n.vader .sword .handle::after {\n  content: '';\n  position: absolute;\n  right: 4px;\n  top: 5px;\n  width: 4px;\n  height: 5px;\n  background: #343434\n}\n\n.vader .sword .light {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 20px;\n  height: 120px;\n  margin-left: -10px;\n  background: rgba(248,80,50,0);\n  background: -moz-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n  background: -webkit-gradient(left top, right top, color-stop(10%, rgba(248,80,50,0)), color-stop(20%, rgba(247,67,37,0)), color-stop(40%, rgba(246,41,12,0.67)), color-stop(50%, rgba(255,176,166,1)), color-stop(60%, rgba(246,41,12,0.67)), color-stop(80%, rgba(236,51,30,0)), color-stop(90%, rgba(231,56,39,0)));\n  background: -webkit-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n  background: -o-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n  background: -ms-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n  background: linear-gradient(to right, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n}\n\n.vader .sword .light::before {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  width: 3px;\n  height: 120px;\n  margin-left: -1px;\n  background: rgba(248,80,50,1);\n  z-index: -1\n}\n\n.vader .shadow {\n  position: absolute;\n  bottom: -17px;\n  left: -25px;\n  display: block;\n  width: 150px;\n  height: 14px;\n  background: rgba(0,0,0,0.15);\n  border-radius: 50%\n}\n\n.animation-right {\n  -webkit-animation: animationHandRight 1.5s linear infinite;\n  animation: animationHandRight 1.5s linear infinite\n}\n\n@-webkit-keyframes animationHandRight {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg)\n  }\n\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg)\n  }\n}\n\n@keyframes animationHandRight {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg)\n  }\n\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg)\n  }\n}\n\n.animation-left {\n  -webkit-animation: animationHandLeft 3s ease-in-out infinite;\n  animation: animationHandLeft 3s ease-in-out infinite\n}\n\n@-webkit-keyframes animationHandLeft {\n  0%, 100% {\n    -webkit-transform: translateX(0) rotate(-25deg);\n    transform: translateX(0) rotate(-25deg)\n  }\n\n  50% {\n    -webkit-transform: translateX(150px) rotate(25deg);\n    transform: translateX(150px) rotate(25deg)\n  }\n}\n\n@keyframes animationHandLeft {\n  0%, 100% {\n    -webkit-transform: translateX(0) rotate(-25deg);\n    transform: translateX(0) rotate(-25deg)\n  }\n\n  50% {\n    -webkit-transform: translateX(150px) rotate(25deg);\n    transform: translateX(150px) rotate(25deg)\n  }\n}\n\n.vader:hover .eyes .left {\n  background: #d81f27\n}\n\n.vader:hover .eyes .right {\n  background: #455caa\n}",
    "file_path": "/mnt/persist/workspace/loaders/csemszepp_happy-dog-58.html"
  },
  "uniapp": {
    "template": "<view class=\"vader\"></view>\n<view class=\"shadow\"></view>\n<view class=\"head\"><view class=\"helmet\"></view><text class=\"left\"></text><text class=\"right\"></text></view><view class=\"eyes\"><text class=\"left\"></text><text class=\"right\"></text></view><text class=\"grill\"><text class=\"left\"></text></text><text class=\"center\"></text><text class=\"right\"></text></span><text class=\"mask\"><text class=\"top\"></text></text><text class=\"left\"></text><text class=\"center\"></text><text class=\"right\"></text></span><text class=\"line\"></text></div>\n<view class=\"torso\"><text class=\"neck\"><text class=\"left\"></text></text><text class=\"center\"></text><text class=\"right\"></text><text class=\"bottom\"></text></span><text class=\"belt\"><text class=\"center\"></text></text></span><view class=\"plate\"></view><text class=\"red_top\"></text><text class=\"red_center\"></text><text class=\"red_bottom\"></text><text class=\"blue\"></text><text class=\"gray\"></text></view></div>\n<view class=\"hand left\"><text class=\"hand\"></text></view>\n<view class=\"hand right animation-right\"><text class=\"hand\"></text></view>\n<view class=\"legs\"><text class=\"left\"></text><text class=\"right\"></text></view>\n<view class=\"boots\"><text class=\"left\"></text><text class=\"right\"></text></view>\n<view class=\"sword animation-left\"><text class=\"handle\"></text><text class=\"light\"></text></view>\n</div>\n<text class=\"text\">Darth Vader By <navigator href=\"https://codepen.io/poziomq\">qpoziomek</navigator></text>",
    "script": "export default {\n  name: 'GalaxyHappyDog58',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by csemszepp - Source: https://codepen.io/poziomq/details/Lbyomj - Tags: loader, animated, #darthvader */\n::-moz-selection {\n  background: #2D3363;\n  color: #FAEECF\n}\n\n::selection {\n  background: #2D3363;\n  color: #FAEECF\n}\n\n.text {\n  position: absolute;\n  bottom: 40rpx;\n  left: 50rpx;\n  color: black;\n  font-family: Arial,sans-serif;\n  text-transform: uppercase;\n  font-size: 28rpx;\n  line-height: 56rpx;\n  font-weight: bold;\n  letter-spacing: 4rpx;\n  z-index: 99\n}\n\na {\n  color: #6172BA;\n  text-decoration: none;\n  /* #ifdef H5 */\n  cursor: pointer\n}\n\na:hover {\n  text-decoration: underline\n}\n\n.vader {\n  position: absolute;\n  /* #endif */\n  top: 50%;\n  left: 50%;\n  display: inline-block;\n  -webkit-transform: translate(-50%,-50%);\n  transform: translate(-50%,-50%)\n}\n\n.vader .head {\n  position: relative;\n  width: 200rpx;\n  height: 200rpx;\n  margin-bottom: -20rpx;\n  z-index: 1\n}\n\n.vader .helmet {\n  position: absolute;\n  top: 0;\n  left: 10rpx;\n  width: 180rpx;\n  height: 160rpx;\n  background: #222222;\n  border-radius: 160rpx 160rpx 0 0\n}\n\n.vader .helmet::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 100rpx;\n  height: 16rpx;\n  margin-left: -50rpx;\n  background: #040507;\n  border-radius: 50rpx 50rpx 0 0 / 16rpx 16rpx 0 0\n}\n\n.vader .helmet::after {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  top: 16rpx;\n  left: 50%;\n  margin-left: -50rpx;\n  height: 0;\n  width: 0;\n  border-left: 50rpx solid transparent;\n  border-right: 50rpx solid transparent;\n  border-top: 48rpx solid #040507\n}\n\n.vader .helmet span {\n  position: absolute;\n  top: 50%;\n  width: 70rpx;\n  height: 110rpx;\n  background: #040507\n}\n\n.vader .helmet .left {\n  left: -12rpx;\n  -webkit-transform: rotate(25deg);\n  transform: rotate(25deg)\n}\n\n.vader .helmet .right {\n  right: -12rpx;\n  -webkit-transform: rotate(-25deg);\n  transform: rotate(-25deg)\n}\n\n.vader .helmet span::before {\n  content: '';\n  position: absolute;\n  top: -10rpx;\n  width: 16rpx;\n  height: 110rpx;\n  background: #222222\n}\n\n.vader .helmet .left::before {\n  left: 0\n}\n\n.vader .helmet .right::before {\n  right: 0\n}\n\n.vader .line {\n  position: absolute;\n  top: -6rpx;\n  left: 50%;\n  width: 12rpx;\n  height: 76rpx;\n  margin-left: -6rpx;\n  background: #343434\n}\n\n.vader .line::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  left: -8rpx;\n  bottom: 0;\n  width: 8rpx;\n  height: 24rpx;\n  background: #040507\n}\n\n.vader .line::after {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  right: -8rpx;\n  bottom: 0;\n  width: 8rpx;\n  height: 24rpx;\n  background: #040507\n}\n\n.vader .mask {\n  position: absolute;\n  bottom: 38rpx;\n  left: 50%\n}\n\n.vader .mask span {\n  position: absolute;\n  top: 0;\n  width: 8rpx;\n  height: 8rpx;\n  border-radius: 2rpx;\n  background: #C6C6C6\n}\n\n.vader .mask .top {\n  left: 50%;\n  margin-top: -32rpx;\n  margin-left: -4rpx\n}\n\n.vader .mask .top::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  left: -14rpx;\n  top: -4rpx;\n  width: 8rpx;\n  height: 48rpx;\n  background: #040507;\n  border-radius: 8rpx;\n  -webkit-transform: rotate(40deg);\n  transform: rotate(40deg)\n}\n\n.vader .mask .top::after {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  right: -14rpx;\n  top: -4rpx;\n  width: 8rpx;\n  height: 48rpx;\n  background: #040507;\n  border-radius: 8rpx;\n  -webkit-transform: rotate(-40deg);\n  transform: rotate(-40deg)\n}\n\n.vader .mask .left {\n  left: 24rpx\n}\n\n.vader .mask .center {\n  left: 50%;\n  margin-top: -32rpx;\n  margin-left: -4rpx\n}\n\n.vader .mask .right {\n  right: 24rpx\n}\n\n.vader .grill {\n  position: absolute;\n  bottom: 40rpx;\n  left: 50%;\n  width: 40rpx;\n  margin-left: -20rpx\n}\n\n.vader .grill span {\n  position: absolute;\n  bottom: -10rpx;\n  width: 4rpx;\n  margin-left: -2rpx;\n  background: #C6C6C6\n}\n\n.vader .grill .left {\n  left: 8rpx;\n  height: 20rpx\n}\n\n.vader .grill .center {\n  left: 50%;\n  height: 34rpx\n}\n\n.vader .grill .right {\n  right: 4rpx;\n  height: 20rpx\n}\n\n.vader .eyes {\n  position: absolute;\n  top: 70rpx;\n  left: 20rpx;\n  width: 160rpx;\n  height: 80rpx;\n  border-radius: 80rpx;\n  background: #343434\n}\n\n.vader .eyes::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  top: 66rpx;\n  left: 10rpx;\n  height: 0;\n  width: 0;\n  border-left: 70rpx solid transparent;\n  border-right: 70rpx solid transparent;\n  border-top: 60rpx solid #343434\n}\n\n.vader .eyes span {\n  position: absolute;\n  top: 10rpx;\n  width: 60rpx;\n  height: 60rpx;\n  border-radius: 60rpx;\n  background: #010000;\n  -webkit-transition: background .3s ease-in-out;\n  transition: background .3s ease-in-out\n}\n\n.vader .eyes .left {\n  left: 14rpx\n}\n\n.vader .eyes .right {\n  right: 14rpx\n}\n\n.vader .torso {\n  position: relative;\n  width: 120rpx;\n  height: 160rpx;\n  border-radius: 100rpx 100rpx 0 0;\n  margin: 0 auto;\n  background: #222222\n}\n\n.vader .torso::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  left: -40rpx;\n  top: -30rpx;\n  width: 200rpx;\n  height: 230rpx;\n  border-radius: 100rpx 100rpx 0 0;\n  margin: 0 auto;\n  background: #040507;\n  z-index: -1\n}\n\n.vader .belt {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 20rpx;\n  background: #040507\n}\n\n.vader .belt span::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 40rpx;\n  height: 20rpx;\n  border-radius: 20rpx;\n  margin-left: -20rpx;\n  background: #C6C6C6\n}\n\n.vader .neck {\n  position: absolute;\n  left: 12rpx;\n  top: 6rpx;\n  width: 96rpx;\n  height: 16rpx;\n  background: #010000;\n  z-index: 5\n}\n\n.vader .neck::before {\n  content: '';\n  position: absolute;\n  top: -16rpx;\n  left: 16rpx;\n  width: 64rpx;\n  height: 20rpx;\n  background: #222222;\n  border-radius: 0 0 8rpx 8rpx\n}\n\n.vader .neck::after {\n  content: '';\n  position: absolute;\n  top: -16rpx;\n  left: 16rpx;\n  width: 64rpx;\n  height: 2rpx;\n  background: #666666\n}\n\n.vader .neck span {\n  position: absolute;\n  top: 0;\n  width: 12rpx;\n  height: 125%;\n  margin-left: -6rpx;\n  background: #434343\n}\n\n.vader .neck .left {\n  left: 12rpx;\n  -webkit-transform: rotate(30deg);\n  transform: rotate(30deg);\n  border-radius: 10rpx 0 0 0\n}\n\n.vader .neck .center {\n  left: 50%;\n  top: 4rpx\n}\n\n.vader .neck .right {\n  right: 6rpx;\n  -webkit-transform: rotate(-30deg);\n  transform: rotate(-30deg);\n  border-radius: 0 10rpx 0 0\n}\n\n.vader .neck .bottom {\n  position: absolute;\n  top: 16rpx;\n  left: 8rpx;\n  width: 92rpx;\n  height: 10rpx;\n  background: #222222\n}\n\n.vader .plate {\n  position: absolute;\n  left: 30rpx;\n  top: 50rpx;\n  width: 60rpx;\n  height: 64rpx;\n  background: #343434\n}\n\n.vader .plate .red_top {\n  position: absolute;\n  left: 4rpx;\n  top: 4rpx;\n  width: 24rpx;\n  height: 36rpx;\n  background: #d81f27\n}\n\n.vader .plate .red_top::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 10rpx;\n  background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_top::after {\n  content: '';\n  position: absolute;\n  bottom: 10rpx;\n  left: 0;\n  width: 100%;\n  height: 4rpx;\n  background: #343434\n}\n\n.vader .plate .red_center {\n  position: absolute;\n  right: 4rpx;\n  top: 24rpx;\n  width: 24rpx;\n  height: 16rpx;\n  background: #d81f27\n}\n\n.vader .plate .red_center::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 8rpx;\n  width: 100%;\n  height: 8rpx;\n  background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_center::after {\n  content: '';\n  position: absolute;\n  left: 10rpx;\n  top: 0;\n  width: 4rpx;\n  height: 100%;\n  background: #343434\n}\n\n.vader .plate .red_bottom {\n  position: absolute;\n  right: 4rpx;\n  bottom: 4rpx;\n  width: 8rpx;\n  height: 16rpx;\n  background: #d81f27\n}\n\n.vader .plate .blue {\n  position: absolute;\n  right: 4rpx;\n  top: 4rpx;\n  width: 24rpx;\n  height: 16rpx;\n  background: #455caa\n}\n\n.vader .plate .blue::before {\n  content: '';\n  position: absolute;\n  top: 6rpx;\n  left: 0;\n  width: 100%;\n  height: 4rpx;\n  background: #343434\n}\n\n.vader .plate .gray {\n  position: absolute;\n  left: 4rpx;\n  bottom: 4rpx;\n  width: 40rpx;\n  height: 16rpx;\n  background: #9f9fa1\n}\n\n.vader .plate .gray::before {\n  content: '';\n  position: absolute;\n  left: 10rpx;\n  top: 0;\n  width: 4rpx;\n  height: 100%;\n  background: #343434\n}\n\n.vader .plate .gray::after {\n  content: '';\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 16rpx;\n  height: 100%;\n  background: rgba(0,0,0,0.2)\n}\n\n.vader .legs {\n  position: relative;\n  width: 100rpx;\n  height: 40rpx;\n  margin: 0 auto;\n  background: #222222\n}\n\n.vader .legs::before {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  width: 40rpx;\n  height: 100%;\n  margin-left: -20rpx;\n  background: #040507\n}\n\n.vader .boots {\n  position: absolute;\n  bottom: 0;\n  left: 50%\n}\n\n.vader .boots span {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  top: 0;\n  width: 60rpx;\n  height: 20rpx;\n  background: #040507\n}\n\n.vader .boots .left {\n  left: 20rpx;\n  border-radius: 0 30rpx 0 0\n}\n\n.vader .boots .right {\n  right: 20rpx;\n  border-radius: 30rpx 0 0 0\n}\n\n.vader .hand {\n  position: absolute;\n  top: 60%;\n  z-index: 2\n}\n\n.vader .hand.left {\n  left: -4rpx;\n  top: 82%\n}\n\n.vader .hand.right {\n  right: -40rpx\n}\n\n.vader .hand .hand {\n  position: absolute;\n  top: 0;\n  width: 22rpx;\n  height: 44rpx;\n  margin-top: -24rpx;\n  margin-left: -24rpx;\n  background: #040507\n}\n\n.vader .hand.left .hand {\n  left: 0;\n  border-radius: 44rpx 0 0 44rpx\n}\n\n.vader .hand.right .hand {\n  right: 0;\n  width: 44rpx;\n  border-radius: 44rpx\n}\n\n.vader .sword {\n  position: absolute;\n  top: 50%;\n  left: -40rpx;\n  z-index: 10\n}\n\n.vader .sword .handle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 12rpx;\n  height: 60rpx;\n  margin-left: -6rpx;\n  background: #343434\n}\n\n.vader .sword .handle::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 10rpx;\n  width: 100%;\n  height: 10rpx;\n  background: #888888\n}\n\n.vader .sword .handle::after {\n  content: '';\n  position: absolute;\n  right: 8rpx;\n  top: 10rpx;\n  width: 8rpx;\n  height: 10rpx;\n  background: #343434\n}\n\n.vader .sword .light {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 40rpx;\n  height: 240rpx;\n  margin-left: -20rpx;\n  background: rgba(248,80,50,0);\n  background: -moz-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n  background: -webkit-gradient(left top, right top, color-stop(10%, rgba(248,80,50,0)), color-stop(20%, rgba(247,67,37,0)), color-stop(40%, rgba(246,41,12,0.67)), color-stop(50%, rgba(255,176,166,1)), color-stop(60%, rgba(246,41,12,0.67)), color-stop(80%, rgba(236,51,30,0)), color-stop(90%, rgba(231,56,39,0)));\n  background: -webkit-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n  background: -o-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n  background: -ms-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n  background: linear-gradient(to right, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n}\n\n.vader .sword .light::before {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  width: 6rpx;\n  height: 240rpx;\n  margin-left: -2rpx;\n  background: rgba(248,80,50,1);\n  z-index: -1\n}\n\n.vader .shadow {\n  position: absolute;\n  bottom: -34rpx;\n  left: -50rpx;\n  display: block;\n  width: 300rpx;\n  height: 28rpx;\n  background: rgba(0,0,0,0.15);\n  border-radius: 50%\n}\n\n.animation-right {\n  -webkit-animation: animationHandRight 1.5s linear infinite;\n  animation: animationHandRight 1.5s linear infinite\n}\n\n@-webkit-keyframes animationHandRight {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg)\n  }\n\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg)\n  }\n}\n\n@keyframes animationHandRight {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg)\n  }\n\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg)\n  }\n}\n\n.animation-left {\n  -webkit-animation: animationHandLeft 3s ease-in-out infinite;\n  animation: animationHandLeft 3s ease-in-out infinite\n}\n\n@-webkit-keyframes animationHandLeft {\n  0%, 100% {\n    -webkit-transform: translateX(0) rotate(-25deg);\n    transform: translateX(0) rotate(-25deg)\n  }\n\n  50% {\n    -webkit-transform: translateX(300rpx) rotate(25deg);\n    transform: translateX(300rpx) rotate(25deg)\n  }\n}\n\n@keyframes animationHandLeft {\n  0%, 100% {\n    -webkit-transform: translateX(0) rotate(-25deg);\n    transform: translateX(0) rotate(-25deg)\n  }\n\n  50% {\n    -webkit-transform: translateX(300rpx) rotate(25deg);\n    transform: translateX(300rpx) rotate(25deg)\n  }\n}\n\n.vader:hover .eyes .left {\n  background: #d81f27\n}\n\n.vader:hover .eyes .right {\n  background: #455caa\n}\n",
    "component_name": "GalaxyHappyDog58"
  },
  "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": [
        "不支持 mask 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 mask 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 14239,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:41.152Z",
  "updated_at": "2025-07-31T07:55:41.152Z"
}