{
  "id": "neerajbaniwal_sweet-sloth-99",
  "name": "sweet-sloth-99",
  "category": "tooltips",
  "author": "neerajbaniwal",
  "description": "sweet-sloth-99 组件 (tooltip, animation, social media, animated, svg, buttons, bounce animation, interactive)",
  "tags": [
    "tooltip",
    "animation",
    "social media",
    "animated",
    "svg",
    "buttons",
    "bounce animation",
    "interactive"
  ],
  "original": {
    "html": "<div class=\"wrapper\">\n  <input type=\"checkbox\">\n  <div class=\"btn\"></div>\n  <div class=\"tooltip\">\n    <svg></svg>\n    <svg></svg>\n    <svg></svg>\n  </div>\n  <svg></svg>\n</div>\n\n<svg style=\"display: none;\" xmlns=\"http://www.w3.org/2000/svg\">\n  <symbol id=\"icon-01\" viewBox=\"0 0 26 22\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path transform=\"translate(0 -2)\" d=\"M18.29,5.76l-.7-1.37A2.59,2.59,0,0,0,15.29,3H10.71a2.59,2.59,0,0,0-2.3,1.39l-.7,1.37a2.6,2.6,0,0,1-2.3,1.39H3.58A2.57,2.57,0,0,0,1,9.71V20.44A2.57,2.57,0,0,0,3.58,23H22.42A2.57,2.57,0,0,0,25,20.44V9.71a2.57,2.57,0,0,0-2.58-2.56H20.59A2.6,2.6,0,0,1,18.29,5.76Z\"></path>\n    <ellipse ry=\"4.49\" rx=\"4.52\" cy=\"12.99\" cx=\"13\"></ellipse>\n  </symbol>\n  <symbol id=\"icon-02\" viewBox=\"0 0 26 22\" xmlns=\"http://www.w3.org/2000/svg\">\n    <line y2=\"9.42\" x2=\"25\" y1=\"12.58\" x1=\"25\"></line>\n    <line y2=\"7.84\" x2=\"21\" y1=\"14.16\" x1=\"21\"></line>\n    <line y2=\"6.26\" x2=\"17\" y1=\"15.74\" x1=\"17\"></line>\n    <line y2=\"1\" x2=\"13\" y1=\"21\" x1=\"13\"></line>\n    <line y2=\"4.68\" x2=\"9\" y1=\"17.32\" x1=\"9\"></line>\n    <line y2=\"8.37\" x2=\"5\" y1=\"13.63\" x1=\"5\"></line>\n    <line y2=\"10.47\" x2=\"1\" y1=\"11.53\" x1=\"1\"></line>\n  </symbol>\n  <symbol id=\"icon-03\" viewBox=\"0 0 26 22\" xmlns=\"http://www.w3.org/2000/svg\">\n    <polygon points=\"8.08 10 1 21 25 21 18.09 12.66 13.78 17.45 8.08 10\"></polygon>\n    <circle r=\"3\" cy=\"4\" cx=\"8\"></circle>\n  </symbol>\n\n  <symbol id=\"shape-01\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <polygon points=\"155.77 140.06 141.08 152.42 159.12 158.96 155.77 140.06\" stroke=\"var(--shape-color-03)\"></polygon>\n  </symbol>\n  <symbol id=\"shape-02\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g stroke=\"var(--shape-color-02)\">\n      <line y2=\"152.29\" x2=\"141.54\" y1=\"146.73\" x1=\"158.66\"></line>\n      <line y2=\"158.07\" x2=\"152.88\" y1=\"140.95\" x1=\"147.32\"></line>\n    </g>\n  </symbol>\n  <symbol id=\"shape-03\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle r=\"13\" cy=\"149.51\" cx=\"150.1\" stroke=\"var(--shape-color-01)\"></circle>\n  </symbol>\n  <symbol id=\"shape-04\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle r=\"4\" cy=\"149.51\" cx=\"150.1\" fill=\"var(--shape-color-01)\"></circle>\n  </symbol>\n  <symbol id=\"shape-05\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect transform=\"translate(40.44 -31.76) rotate(13.94)\" height=\"18\" width=\"18\" y=\"140.51\" x=\"141.1\" stroke=\"var(--shape-color-03)\"></rect>\n  </symbol>\n  <symbol id=\"shape-06\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g stroke=\"var(--shape-color-02)\">\n      <line y2=\"146.24\" x2=\"141.72\" y1=\"152.78\" x1=\"158.48\"></line>\n      <line y2=\"157.89\" x2=\"146.83\" y1=\"141.13\" x1=\"153.37\"></line>\n    </g>\n  </symbol>\n  <symbol id=\"shape-07\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect transform=\"translate(-42.94 62.23) rotate(-20.56)\" height=\"24\" width=\"24\" y=\"137.51\" x=\"138.1\" stroke=\"var(--shape-color-03)\"></rect>\n  </symbol>\n\n  <symbol id=\"shape-08\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle r=\"4\" cy=\"149.51\" cx=\"150.1\" fill=\"var(--shape-color-01)\"></circle>\n  </symbol>\n  <symbol id=\"shape-09\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle r=\"8\" cy=\"149.51\" cx=\"150.1\" stroke=\"var(--shape-color-01)\"></circle>\n  </symbol>\n</svg>",
    "css": "/* From Uiverse.io by neerajbaniwal  - Tags: tooltip, animation, social media, animated, svg, buttons, bounce animation */\n.wrapper {\n  --background: #62abff;\n  --icon-color: #414856;\n  --shape-color-01: #b8cbee;\n  --shape-color-02: #7691e8;\n  --shape-color-03: #fdd053;\n  --width: 90px;\n  --height: 90px;\n  --border-radius: var(--height);\n  width: var(--width);\n  height: var(--height);\n  position: relative;\n  border-radius: var(--border-radius);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.wrapper .btn {\n  background: var(--background);\n  width: var(--width);\n  height: var(--height);\n  position: relative;\n  z-index: 3;\n  border-radius: var(--border-radius);\n  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  -webkit-animation: plus-animation-reverse 0.5s ease-out forwards;\n  animation: plus-animation-reverse 0.5s ease-out forwards;\n}\n.wrapper .btn::before,\n.wrapper .btn::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  border-radius: 4px;\n  background: #fff;\n}\n.wrapper .btn::before {\n  width: 4px;\n  height: 28px;\n}\n.wrapper .btn::after {\n  width: 28px;\n  height: 4px;\n}\n.wrapper .tooltip {\n  width: 90px;\n  height: 75px;\n  border-radius: 70px;\n  position: absolute;\n  background: #fff;\n  z-index: 2;\n  padding: 0 15px;\n  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);\n  opacity: 0;\n  top: 0;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in;\n}\n.wrapper .tooltip > svg {\n  width: 100%;\n  height: 26px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  cursor: pointer;\n}\n.wrapper .tooltip > svg .icon {\n  fill: none;\n  stroke: var(--icon-color);\n  stroke-width: 2px;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0.4;\n  transition: opacity 0.3s ease;\n}\n.wrapper .tooltip > svg:hover .icon {\n  opacity: 1;\n}\n.wrapper .tooltip::after {\n  content: \"\";\n  width: 20px;\n  height: 20px;\n  background: #fff;\n  border-radius: 3px;\n  position: absolute;\n  left: 50%;\n  margin-left: -10px;\n  bottom: -8px;\n  transform: rotate(45deg);\n  z-index: 0;\n}\n.wrapper > svg {\n  width: 300px;\n  height: 300px;\n  position: absolute;\n  z-index: 1;\n  transform: scale(0);\n}\n.wrapper > svg .shape {\n  fill: none;\n  stroke: none;\n  stroke-width: 3px;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  transform-origin: 50% 20%;\n}\n.wrapper input {\n  height: 100%;\n  width: 100%;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n  position: absolute;\n  z-index: 5;\n  opacity: 0;\n}\n.wrapper input:checked ~ svg {\n  -webkit-animation: pang-animation 1.2s ease-out forwards;\n  animation: pang-animation 1.2s ease-out forwards;\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(1) {\n  transform: translate(25px, 30%) rotate(40deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(2) {\n  transform: translate(-4px, 30%) rotate(80deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(3) {\n  transform: translate(12px, 30%) rotate(120deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(4) {\n  transform: translate(8px, 30%) rotate(160deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(5) {\n  transform: translate(21px, 30%) rotate(200deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(6) {\n  transform: translate(0px, 30%) rotate(240deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(7) {\n  transform: translate(17px, 30%) rotate(280deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(8) {\n  transform: translate(-3px, 30%) rotate(320deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(9) {\n  transform: translate(25px, 30%) rotate(360deg);\n}\n.wrapper input:checked ~ .btn {\n  -webkit-animation: plus-animation 0.5s ease-out forwards;\n  animation: plus-animation 0.5s ease-out forwards;\n}\n.wrapper input:checked ~ .tooltip {\n  width: 190px;\n  height: 70px;\n  -webkit-animation: stretch-animation 1s ease-out forwards 0.15s;\n  animation: stretch-animation 1s ease-out forwards 0.15s;\n  top: -90px;\n  opacity: 1;\n}\n\n@-webkit-keyframes pang-animation {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1.1);\n    opacity: 0;\n  }\n}\n\n@keyframes pang-animation {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1.1);\n    opacity: 0;\n  }\n}\n@-webkit-keyframes plus-animation {\n  0% {\n    transform: rotate(0) scale(1);\n  }\n  20% {\n    transform: rotate(60deg) scale(0.93);\n  }\n  55% {\n    transform: rotate(35deg) scale(0.97);\n  }\n  80% {\n    transform: rotate(48deg) scale(0.94);\n  }\n  100% {\n    transform: rotate(45deg) scale(0.95);\n  }\n}\n@keyframes plus-animation {\n  0% {\n    transform: rotate(0) scale(1);\n  }\n  20% {\n    transform: rotate(60deg) scale(0.93);\n  }\n  55% {\n    transform: rotate(35deg) scale(0.97);\n  }\n  80% {\n    transform: rotate(48deg) scale(0.94);\n  }\n  100% {\n    transform: rotate(45deg) scale(0.95);\n  }\n}\n@-webkit-keyframes plus-animation-reverse {\n  0% {\n    transform: rotate(45deg) scale(0.95);\n  }\n  20% {\n    transform: rotate(-15deg);\n  }\n  55% {\n    transform: rotate(10deg);\n  }\n  80% {\n    transform: rotate(-3deg);\n  }\n  100% {\n    transform: rotate(0) scale(1);\n  }\n}\n@keyframes plus-animation-reverse {\n  0% {\n    transform: rotate(45deg) scale(0.95);\n  }\n  20% {\n    transform: rotate(-15deg);\n  }\n  55% {\n    transform: rotate(10deg);\n  }\n  80% {\n    transform: rotate(-3deg);\n  }\n  100% {\n    transform: rotate(0) scale(1);\n  }\n}\n@-webkit-keyframes stretch-animation {\n  0% {\n    transform: scale(1, 1);\n  }\n  10% {\n    transform: scale(1.1, 0.9);\n  }\n  30% {\n    transform: scale(0.9, 1.1);\n  }\n  50% {\n    transform: scale(1.05, 0.95);\n  }\n  100% {\n    transform: scale(1, 1);\n  }\n}\n@keyframes stretch-animation {\n  0% {\n    transform: scale(1, 1);\n  }\n  10% {\n    transform: scale(1.1, 0.9);\n  }\n  30% {\n    transform: scale(0.9, 1.1);\n  }\n  50% {\n    transform: scale(1.05, 0.95);\n  }\n  100% {\n    transform: scale(1, 1);\n  }\n}\n\n.socials {\n  position: fixed;\n  display: block;\n  left: 20px;\n  bottom: 20px;\n}\n.socials > a {\n  display: block;\n  width: 30px;\n  opacity: 0.2;\n  transform: scale(var(--scale, 0.8));\n  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);\n}\n.socials > a:hover {\n  --scale: 1;\n}",
    "file_path": "/mnt/persist/workspace/Tooltips/neerajbaniwal_sweet-sloth-99.html"
  },
  "uniapp": {
    "template": "<view class=\"wrapper\"></view>\n  <input type=\"checkbox\"></input>\n  <view class=\"btn\"></view>\n  <view class=\"tooltip\"></view>\n    <view></view>\n    <view></view>\n    <view></view>\n  </div>\n  <view></view>\n</div>\n\n<view style=\"display: none;\" xmlns=\"http://www.w3.org/2000/svg\"></view>\n  <symbol id=\"icon-01\" viewBox=\"0 0 26 22\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path transform=\"translate(0 -2)\" d=\"M18.29,5.76l-.7-1.37A2.59,2.59,0,0,0,15.29,3H10.71a2.59,2.59,0,0,0-2.3,1.39l-.7,1.37a2.6,2.6,0,0,1-2.3,1.39H3.58A2.57,2.57,0,0,0,1,9.71V20.44A2.57,2.57,0,0,0,3.58,23H22.42A2.57,2.57,0,0,0,25,20.44V9.71a2.57,2.57,0,0,0-2.58-2.56H20.59A2.6,2.6,0,0,1,18.29,5.76Z\"></path>\n    <ellipse ry=\"4.49\" rx=\"4.52\" cy=\"12.99\" cx=\"13\"></ellipse>\n  </symbol>\n  <symbol id=\"icon-02\" viewBox=\"0 0 26 22\" xmlns=\"http://www.w3.org/2000/svg\">\n    <line y2=\"9.42\" x2=\"25\" y1=\"12.58\" x1=\"25\"></line>\n    <line y2=\"7.84\" x2=\"21\" y1=\"14.16\" x1=\"21\"></line>\n    <line y2=\"6.26\" x2=\"17\" y1=\"15.74\" x1=\"17\"></line>\n    <line y2=\"1\" x2=\"13\" y1=\"21\" x1=\"13\"></line>\n    <line y2=\"4.68\" x2=\"9\" y1=\"17.32\" x1=\"9\"></line>\n    <line y2=\"8.37\" x2=\"5\" y1=\"13.63\" x1=\"5\"></line>\n    <line y2=\"10.47\" x2=\"1\" y1=\"11.53\" x1=\"1\"></line>\n  </symbol>\n  <symbol id=\"icon-03\" viewBox=\"0 0 26 22\" xmlns=\"http://www.w3.org/2000/svg\">\n    <polygon points=\"8.08 10 1 21 25 21 18.09 12.66 13.78 17.45 8.08 10\"></polygon>\n    <circle r=\"3\" cy=\"4\" cx=\"8\"></circle>\n  </symbol>\n\n  <symbol id=\"shape-01\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <polygon points=\"155.77 140.06 141.08 152.42 159.12 158.96 155.77 140.06\" stroke=\"var(--shape-color-03)\"></polygon>\n  </symbol>\n  <symbol id=\"shape-02\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g stroke=\"var(--shape-color-02)\">\n      <line y2=\"152.29\" x2=\"141.54\" y1=\"146.73\" x1=\"158.66\"></line>\n      <line y2=\"158.07\" x2=\"152.88\" y1=\"140.95\" x1=\"147.32\"></line>\n    </g>\n  </symbol>\n  <symbol id=\"shape-03\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle r=\"13\" cy=\"149.51\" cx=\"150.1\" stroke=\"var(--shape-color-01)\"></circle>\n  </symbol>\n  <symbol id=\"shape-04\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle r=\"4\" cy=\"149.51\" cx=\"150.1\" fill=\"var(--shape-color-01)\"></circle>\n  </symbol>\n  <symbol id=\"shape-05\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect transform=\"translate(40.44 -31.76) rotate(13.94)\" height=\"18\" width=\"18\" y=\"140.51\" x=\"141.1\" stroke=\"var(--shape-color-03)\"></rect>\n  </symbol>\n  <symbol id=\"shape-06\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g stroke=\"var(--shape-color-02)\">\n      <line y2=\"146.24\" x2=\"141.72\" y1=\"152.78\" x1=\"158.48\"></line>\n      <line y2=\"157.89\" x2=\"146.83\" y1=\"141.13\" x1=\"153.37\"></line>\n    </g>\n  </symbol>\n  <symbol id=\"shape-07\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect transform=\"translate(-42.94 62.23) rotate(-20.56)\" height=\"24\" width=\"24\" y=\"137.51\" x=\"138.1\" stroke=\"var(--shape-color-03)\"></rect>\n  </symbol>\n\n  <symbol id=\"shape-08\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle r=\"4\" cy=\"149.51\" cx=\"150.1\" fill=\"var(--shape-color-01)\"></circle>\n  </symbol>\n  <symbol id=\"shape-09\" viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle r=\"8\" cy=\"149.51\" cx=\"150.1\" stroke=\"var(--shape-color-01)\"></circle>\n  </symbol>\n</svg>",
    "script": "export default {\n  name: 'GalaxySweetSloth99',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by neerajbaniwal  - Tags: tooltip, animation, social media, animated, svg, buttons, bounce animation */\n.wrapper {\n  --background: #62abff;\n  --icon-color: #414856;\n  --shape-color-01: #b8cbee;\n  --shape-color-02: #7691e8;\n  --shape-color-03: #fdd053;\n  --width: 180rpx;\n  --height: 180rpx;\n  --border-radius: var(--height);\n  width: var(--width);\n  height: var(--height);\n  position: relative;\n  border-radius: var(--border-radius);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.wrapper .btn {\n  background: var(--background);\n  width: var(--width);\n  height: var(--height);\n  position: relative;\n  z-index: 3;\n  border-radius: var(--border-radius);\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 20rpx 60rpx rgba(65, 72, 86, 0.05);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  -webkit-animation: plus-animation-reverse 0.5s ease-out forwards;\n  animation: plus-animation-reverse 0.5s ease-out forwards;\n}\n.wrapper .btn::before,\n.wrapper .btn::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  border-radius: 8rpx;\n  background: #fff;\n}\n.wrapper .btn::before {\n  width: 8rpx;\n  height: 56rpx;\n}\n.wrapper .btn::after {\n  width: 56rpx;\n  height: 8rpx;\n}\n.wrapper .tooltip {\n  width: 180rpx;\n  height: 150rpx;\n  border-radius: 140rpx;\n  position: absolute;\n  background: #fff;\n  z-index: 2;\n  padding: 0 30rpx;\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 20rpx 60rpx rgba(65, 72, 86, 0.05);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  opacity: 0;\n  top: 0;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in;\n}\n.wrapper .tooltip > svg {\n  width: 100%;\n  height: 52rpx;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.wrapper .tooltip > svg .icon {\n  fill: none;\n  stroke: var(--icon-color);\n  stroke-width: 4rpx;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0.4;\n  transition: opacity 0.3s ease;\n}\n.wrapper .tooltip > svg:hover .icon {\n  opacity: 1;\n}\n.wrapper .tooltip::after {\n  content: \"\";\n  width: 40rpx;\n  height: 40rpx;\n  background: #fff;\n  border-radius: 6rpx;\n  position: absolute;\n  left: 50%;\n  margin-left: -20rpx;\n  bottom: -16rpx;\n  transform: rotate(45deg);\n  z-index: 0;\n}\n.wrapper > svg {\n  width: 600rpx;\n  height: 600rpx;\n  position: absolute;\n  z-index: 1;\n  transform: scale(0);\n}\n.wrapper > svg .shape {\n  fill: none;\n  stroke: none;\n  stroke-width: 6rpx;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  transform-origin: 50% 20%;\n}\n.wrapper input {\n  height: 100%;\n  width: 100%;\n  border-radius: var(--border-radius);\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n  position: absolute;\n  z-index: 5;\n  opacity: 0;\n}\n.wrapper input:checked ~ svg {\n  -webkit-animation: pang-animation 1.2s ease-out forwards;\n  animation: pang-animation 1.2s ease-out forwards;\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(1) {\n  transform: translate(50rpx, 30%) rotate(40deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(2) {\n  transform: translate(-8rpx, 30%) rotate(80deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(3) {\n  transform: translate(24rpx, 30%) rotate(120deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(4) {\n  transform: translate(16rpx, 30%) rotate(160deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(5) {\n  transform: translate(42rpx, 30%) rotate(200deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(6) {\n  transform: translate(0rpx, 30%) rotate(240deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(7) {\n  transform: translate(34rpx, 30%) rotate(280deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(8) {\n  transform: translate(-6rpx, 30%) rotate(320deg);\n}\n.wrapper input:checked ~ svg .shape:nth-of-type(9) {\n  transform: translate(50rpx, 30%) rotate(360deg);\n}\n.wrapper input:checked ~ .btn {\n  -webkit-animation: plus-animation 0.5s ease-out forwards;\n  animation: plus-animation 0.5s ease-out forwards;\n}\n.wrapper input:checked ~ .tooltip {\n  width: 380rpx;\n  height: 140rpx;\n  -webkit-animation: stretch-animation 1s ease-out forwards 0.15s;\n  animation: stretch-animation 1s ease-out forwards 0.15s;\n  top: -180rpx;\n  opacity: 1;\n}\n\n@-webkit-keyframes pang-animation {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1.1);\n    opacity: 0;\n  }\n}\n\n@keyframes pang-animation {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1.1);\n    opacity: 0;\n  }\n}\n@-webkit-keyframes plus-animation {\n  0% {\n    transform: rotate(0) scale(1);\n  }\n  20% {\n    transform: rotate(60deg) scale(0.93);\n  }\n  55% {\n    transform: rotate(35deg) scale(0.97);\n  }\n  80% {\n    transform: rotate(48deg) scale(0.94);\n  }\n  100% {\n    transform: rotate(45deg) scale(0.95);\n  }\n}\n@keyframes plus-animation {\n  0% {\n    transform: rotate(0) scale(1);\n  }\n  20% {\n    transform: rotate(60deg) scale(0.93);\n  }\n  55% {\n    transform: rotate(35deg) scale(0.97);\n  }\n  80% {\n    transform: rotate(48deg) scale(0.94);\n  }\n  100% {\n    transform: rotate(45deg) scale(0.95);\n  }\n}\n@-webkit-keyframes plus-animation-reverse {\n  0% {\n    transform: rotate(45deg) scale(0.95);\n  }\n  20% {\n    transform: rotate(-15deg);\n  }\n  55% {\n    transform: rotate(10deg);\n  }\n  80% {\n    transform: rotate(-3deg);\n  }\n  100% {\n    transform: rotate(0) scale(1);\n  }\n}\n@keyframes plus-animation-reverse {\n  0% {\n    transform: rotate(45deg) scale(0.95);\n  }\n  20% {\n    transform: rotate(-15deg);\n  }\n  55% {\n    transform: rotate(10deg);\n  }\n  80% {\n    transform: rotate(-3deg);\n  }\n  100% {\n    transform: rotate(0) scale(1);\n  }\n}\n@-webkit-keyframes stretch-animation {\n  0% {\n    transform: scale(1, 1);\n  }\n  10% {\n    transform: scale(1.1, 0.9);\n  }\n  30% {\n    transform: scale(0.9, 1.1);\n  }\n  50% {\n    transform: scale(1.05, 0.95);\n  }\n  100% {\n    transform: scale(1, 1);\n  }\n}\n@keyframes stretch-animation {\n  0% {\n    transform: scale(1, 1);\n  }\n  10% {\n    transform: scale(1.1, 0.9);\n  }\n  30% {\n    transform: scale(0.9, 1.1);\n  }\n  50% {\n    transform: scale(1.05, 0.95);\n  }\n  100% {\n    transform: scale(1, 1);\n  }\n}\n\n.socials {\n  position: fixed;\n  display: block;\n  left: 40rpx;\n  bottom: 40rpx;\n}\n.socials > a {\n  display: block;\n  width: 60rpx;\n  opacity: 0.2;\n  transform: scale(var(--scale, 0.8));\n  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);\n}\n.socials > a:hover {\n  --scale: 1;\n}\n\n",
    "component_name": "GalaxySweetSloth99"
  },
  "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 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 9754,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:38.725Z",
  "updated_at": "2025-07-31T07:55:38.725Z"
}