{
  "id": "Admin12121_lovely-cat-86",
  "name": "lovely-cat-86",
  "category": "buttons",
  "author": "Admin12121",
  "description": "lovely-cat-86 组件 (delete, animated, 3d button, animation, gradient, interactive)",
  "tags": [
    "delete",
    "animated",
    "3d button",
    "animation",
    "gradient",
    "interactive"
  ],
  "original": {
    "html": "<button class=\"bin\">🗑</button>\n<div class=\"div\">\n  <small>\n    <i></i>\n  </small>\n</div>",
    "css": "/* From Uiverse.io by Admin12121 - Tags: delete, animated, 3d button */\n.bin {\n  --black: #000000;\n  --binbg: #e6e6e6;\n  --width: 40px;\n  --height: 50px;\n  background-image: repeating-linear-gradient(to right, transparent, transparent 5px, var(--black) 5px, var(--black) 7px, transparent 7px);\n  background-size: 11px calc(var(--height) / 2);\n  background-position: 2px center;\n  background-repeat: repeat-x;\n  margin: auto;\n  position: relative;\n  background-color: var(--binbg);\n  border: 0;\n  color: transparent;\n  width: var(--width);\n  height: var(--height);\n  border: 2px solid var(--black);\n  border-radius: 0 0 6px 6px;\n}\n\n.bin::after, .bin::before {\n  content: \"\";\n  position: absolute;\n  transform-origin: left bottom;\n  transition: 200ms ease-in-out;\n  border-width: 2px;\n  border-style: solid;\n  margin: auto;\n  right: 0;\n}\n\n.bin::after {\n  left: -4px;\n  top: -5px;\n  height: 7px;\n  width: var(--width);\n  border: 2px solid var(--black);\n  background-color: var(--binbg);\n  border-radius: 5px 5px 0 0;\n}\n\n.bin::before {\n  top: -8px;\n  height: 2px;\n  width: 10px;\n  border-color: var(--black) var(--black) transparent var(--black);\n  left: 0;\n}\n\n.bin:focus, .bin:active {\n  outline: none;\n  cursor: none;\n}\n\n.bin:focus::before, .bin:focus::after, .bin:active::before, .bin:active::after {\n  transform-origin: left bottom;\n  transform: rotate(-45deg);\n}\n\n.bin:focus::before, .bin:active::before {\n  top: -18px;\n  left: -23px;\n  right: 3px;\n}\n\n.bin:focus ~ .div, .bin:active ~ .div {\n  cursor: none;\n  z-index: 1;\n}\n\n.bin:focus ~ .div:hover, .bin:active ~ .div:hover {\n  cursor: none;\n}\n\n.bin:focus ~ .overlay, .bin:active ~ .overlay {\n  pointer-events: inherit;\n  z-index: 2;\n  cursor: none;\n}\n\n.bin:focus ~ .div > small, .bin:active ~ .div > small {\n  opacity: 1;\n  animation: throw 300ms 30ms cubic-bezier(0.215, 0.61, 0.355, 0.3) forwards;\n}\n\n.div:focus, .div:active, .div:hover {\n  z-index: 1;\n  cursor: none;\n}\n\n.div > small {\n  position: absolute;\n  width: 20px;\n  height: 16px;\n  left: 0;\n  right: -58px;\n  margin: auto;\n  top: 27px;\n  bottom: 0;\n  border-left: 1px solid black;\n  opacity: 0;\n}\n\n.div > small::before, .div > small::after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  border-right: 1px solid black;\n}\n\n.div > small::before {\n  height: 17px;\n  transform: rotate(-42deg);\n  top: -3px;\n  right: 13px;\n}\n\n.div > small::after {\n  height: 4px;\n  transform: rotate(-112deg);\n  top: 18px;\n  right: 11px;\n}\n\n.div > small > i::before, .div > small > i::after {\n  content: \"\";\n  position: absolute;\n  border-top: 1px solid black;\n}\n\n.div > small > i::before {\n  border-left: 1px solid black;\n  width: 4px;\n  bottom: -4px;\n  height: 4px;\n  transform: rotate(66deg);\n}\n\n.div > small > i::after {\n  border-right: 1px solid black;\n  width: 5px;\n  bottom: -2px;\n  height: 5px;\n  transform: rotate(-114deg);\n  right: 6px;\n}\n\n@keyframes throw {\n  0% {\n    transform: translate(0, 0);\n  }\n\n  50% {\n    transform: translate(0, -30px) rotate(-10deg);\n  }\n\n  60% {\n    transform: translate(0, -40px) rotate(-30deg);\n  }\n\n  70% {\n    transform: translate(-5px, -50px) rotate(-40deg) scale(1);\n    opacity: 1;\n  }\n\n  80% {\n    transform: translate(-10px, -60px) rotate(-60deg) scale(0.9);\n    opacity: 1;\n  }\n\n  90% {\n    transform: translate(-20px, -50px) rotate(-100deg) scale(0.5);\n    opacity: 0.8;\n  }\n\n  100% {\n    transform: translate(-30px, -20px) rotate(-80deg) scale(0.4);\n    opacity: 0;\n  }\n}",
    "file_path": "/mnt/persist/workspace/Buttons/Admin12121_lovely-cat-86.html"
  },
  "uniapp": {
    "template": "<button class=\"bin\"></button>🗑</button>\n<view class=\"div\"></view>\n  <small>\n    <i></i>\n  </small>\n</div>",
    "script": "export default {\n  name: 'GalaxyLovelyCat86',\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: delete, animated, 3d button */\n.bin {\n  --black: #000000;\n  --binbg: #e6e6e6;\n  --width: 80rpx;\n  --height: 100rpx;\n  background-image: repeating-linear-gradient(to right, transparent, transparent 10rpx, var(--black) 10rpx, var(--black) 14rpx, transparent 14rpx);\n  background-size: 22rpx calc(var(--height) / 2);\n  background-position: 4rpx center;\n  background-repeat: repeat-x;\n  margin: auto;\n  position: relative;\n  background-color: var(--binbg);\n  border: 0;\n  color: transparent;\n  width: var(--width);\n  height: var(--height);\n  border: 4rpx solid var(--black);\n  border-radius: 0 0 12rpx 12rpx;\n}\n\n.bin::after, .bin::before {\n  content: \"\";\n  position: absolute;\n  transform-origin: left bottom;\n  transition: 200ms ease-in-out;\n  border-width: 4rpx;\n  border-style: solid;\n  margin: auto;\n  right: 0;\n}\n\n.bin::after {\n  left: -8rpx;\n  top: -10rpx;\n  height: 14rpx;\n  width: var(--width);\n  border: 4rpx solid var(--black);\n  background-color: var(--binbg);\n  border-radius: 10rpx 10rpx 0 0;\n}\n\n.bin::before {\n  top: -16rpx;\n  height: 4rpx;\n  width: 20rpx;\n  border-color: var(--black) var(--black) transparent var(--black);\n  left: 0;\n}\n\n.bin:focus, .bin:active {\n  outline: none;\n  /* #ifdef H5 */\n  cursor: none;\n  /* #endif */\n}\n\n.bin:focus::before, .bin:focus::after, .bin:active::before, .bin:active::after {\n  transform-origin: left bottom;\n  transform: rotate(-45deg);\n}\n\n.bin:focus::before, .bin:active::before {\n  top: -36rpx;\n  left: -46rpx;\n  right: 6rpx;\n}\n\n.bin:focus ~ .div, .bin:active ~ .div {\n  /* #ifdef H5 */\n  cursor: none;\n  /* #endif */\n  z-index: 1;\n}\n\n.bin:focus ~ .div:hover, .bin:active ~ .div:hover {\n  /* #ifdef H5 */\n  cursor: none;\n  /* #endif */\n}\n\n.bin:focus ~ .overlay, .bin:active ~ .overlay {\n  pointer-events: inherit;\n  z-index: 2;\n  /* #ifdef H5 */\n  cursor: none;\n  /* #endif */\n}\n\n.bin:focus ~ .div > small, .bin:active ~ .div > small {\n  opacity: 1;\n  animation: throw 300ms 30ms cubic-bezier(0.215, 0.61, 0.355, 0.3) forwards;\n}\n\n.div:focus, .div:active, .div:hover {\n  z-index: 1;\n  /* #ifdef H5 */\n  cursor: none;\n  /* #endif */\n}\n\n.div > small {\n  position: absolute;\n  width: 40rpx;\n  height: 32rpx;\n  left: 0;\n  right: -116rpx;\n  margin: auto;\n  top: 54rpx;\n  bottom: 0;\n  border-left: 2rpx solid black;\n  opacity: 0;\n}\n\n.div > small::before, .div > small::after {\n  content: \"\";\n  position: absolute;\n  width: 2rpx;\n  border-right: 2rpx solid black;\n}\n\n.div > small::before {\n  height: 34rpx;\n  transform: rotate(-42deg);\n  top: -6rpx;\n  right: 26rpx;\n}\n\n.div > small::after {\n  height: 8rpx;\n  transform: rotate(-112deg);\n  top: 36rpx;\n  right: 22rpx;\n}\n\n.div > small > i::before, .div > small > i::after {\n  content: \"\";\n  position: absolute;\n  border-top: 2rpx solid black;\n}\n\n.div > small > i::before {\n  border-left: 2rpx solid black;\n  width: 8rpx;\n  bottom: -8rpx;\n  height: 8rpx;\n  transform: rotate(66deg);\n}\n\n.div > small > i::after {\n  border-right: 2rpx solid black;\n  width: 10rpx;\n  bottom: -4rpx;\n  height: 10rpx;\n  transform: rotate(-114deg);\n  right: 12rpx;\n}\n\n@keyframes throw {\n  0% {\n    transform: translate(0, 0);\n  }\n\n  50% {\n    transform: translate(0, -60rpx) rotate(-10deg);\n  }\n\n  60% {\n    transform: translate(0, -80rpx) rotate(-30deg);\n  }\n\n  70% {\n    transform: translate(-10rpx, -100rpx) rotate(-40deg) scale(1);\n    opacity: 1;\n  }\n\n  80% {\n    transform: translate(-20rpx, -120rpx) rotate(-60deg) scale(0.9);\n    opacity: 1;\n  }\n\n  90% {\n    transform: translate(-40rpx, -100rpx) rotate(-100deg) scale(0.5);\n    opacity: 0.8;\n  }\n\n  100% {\n    transform: translate(-60rpx, -40rpx) rotate(-80deg) scale(0.4);\n    opacity: 0;\n  }\n}\n",
    "component_name": "GalaxyLovelyCat86"
  },
  "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": "是否禁用"
    },
    {
      "name": "text",
      "type": "String",
      "default": "按钮",
      "required": false,
      "description": "按钮文字"
    },
    {
      "name": "type",
      "type": "String",
      "default": "primary",
      "required": false,
      "description": "按钮类型"
    }
  ],
  "events": [
    {
      "name": "click",
      "description": "点击事件",
      "parameters": [
        "event"
      ]
    }
  ],
  "slots": [
    {
      "name": "",
      "description": "",
      "props": []
    }
  ],
  "compatibility": {
    "h5": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "mp-weixin": {
      "supported": true,
      "issues": [
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 3515,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:32.536Z",
  "updated_at": "2025-07-31T07:55:32.536Z"
}