galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
97 lines • 23.4 kB
JSON
{
"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"
}