{
"id": "StealthWorm_chatty-zebra-11",
"name": "chatty-zebra-11",
"category": "loaders",
"author": "StealthWorm",
"description": "chatty-zebra-11 组件 (loader, love, death, robots, animation, interactive)",
"tags": [
"loader",
"love",
"death",
"robots",
"animation",
"interactive"
],
"original": {
"html": "",
"css": "/* From Uiverse.io by StealthWorm - Tags: loader, love, death, robots */\n.loader {\n display: flex;\n position: relative;\n justify-items: center;\n align-items: center;\n gap: 1rem;\n height: 55px;\n width: 200px;\n overflow: hidden;\n}\n\n.container {\n width: 100%;\n display: flex;\n flex-direction: column;\n height: 200px;\n position: relative;\n align-items: center;\n}\n\n.carousel {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n position: absolute;\n width: 100%;\n transform-origin: center;\n animation-delay: 2s;\n}\n\n.loader .container:nth-child(3) {\n justify-content: flex-start;\n justify-items: flex-start;\n animation: scroll-up 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(2) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(1) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 3s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.love {\n background: red;\n display: flex;\n width: 30px;\n height: 30px;\n position: relative;\n align-items: center;\n justify-content: center;\n left: 8px;\n margin: 0.8rem 4px;\n transform: rotate(45deg);\n animation-delay: 2s;\n}\n\n.love::before, .love::after {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: red;\n}\n\n.love::before {\n left: -16px;\n}\n\n.love::after {\n top: -16px;\n}\n\n.death {\n display: flex;\n width: 100%;\n height: 55px;\n position: relative;\n align-items: center;\n justify-content: center;\n animation: rotation 3s infinite ease-in-out;\n animation-delay: 1s;\n}\n\n.death:after {\n content: '';\n height: 63px;\n position: absolute;\n border-left: 12px solid red;\n transform: rotate(45deg);\n border-radius: 8px;\n top: -4px;\n}\n\n.death:before {\n content: '';\n height: 60px;\n position: absolute;\n border-left: 12px solid red;\n transform: rotate(-45deg);\n}\n\n.loader:hover {\n animation: none;\n}\n\n.robots {\n display: flex;\n width: 100%;\n height: 55px;\n justify-content: space-between;\n background-color: #ff0000;\n border-radius: 0 8px 8px;\n padding: 8px;\n animation-delay: 5s;\n}\n\n.robots::after {\n content: '';\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: #ffffff;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n.robots::before {\n content: '';\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: #ffffff;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n@keyframes scroll-up {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(-150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes scroll-down {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes rotation {\n 20%, 100% {\n transform: rotate(180deg);\n }\n}\n\n@keyframes blink {\n 0% {\n height: 0;\n }\n\n 20% {\n height: 12px;\n }\n\n 100% {\n height: 12px;\n }\n}",
"file_path": "/mnt/persist/workspace/loaders/StealthWorm_chatty-zebra-11.html"
},
"uniapp": {
"template": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n",
"script": "export default {\n name: 'GalaxyChattyZebra11',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by StealthWorm - Tags: loader, love, death, robots */\n.loader {\n display: flex;\n position: relative;\n justify-items: center;\n align-items: center;\n gap: 1rem;\n height: 110rpx;\n width: 400rpx;\n overflow: hidden;\n}\n\n.container {\n width: 100%;\n display: flex;\n flex-direction: column;\n height: 400rpx;\n position: relative;\n align-items: center;\n}\n\n.carousel {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n position: absolute;\n width: 100%;\n transform-origin: center;\n animation-delay: 2s;\n}\n\n.loader .container:nth-child(3) {\n justify-content: flex-start;\n justify-items: flex-start;\n animation: scroll-up 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(2) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(1) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 3s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.love {\n background: red;\n display: flex;\n width: 60rpx;\n height: 60rpx;\n position: relative;\n align-items: center;\n justify-content: center;\n left: 16rpx;\n margin: 0.8rem 8rpx;\n transform: rotate(45deg);\n animation-delay: 2s;\n}\n\n.love::before, .love::after {\n content: '';\n position: absolute;\n width: 60rpx;\n height: 60rpx;\n border-radius: 50%;\n background: red;\n}\n\n.love::before {\n left: -32rpx;\n}\n\n.love::after {\n top: -32rpx;\n}\n\n.death {\n display: flex;\n width: 100%;\n height: 110rpx;\n position: relative;\n align-items: center;\n justify-content: center;\n animation: rotation 3s infinite ease-in-out;\n animation-delay: 1s;\n}\n\n.death:after {\n content: '';\n height: 126rpx;\n position: absolute;\n border-left: 24rpx solid red;\n transform: rotate(45deg);\n border-radius: 16rpx;\n top: -8rpx;\n}\n\n.death:before {\n content: '';\n height: 120rpx;\n position: absolute;\n border-left: 24rpx solid red;\n transform: rotate(-45deg);\n}\n\n.loader:hover {\n animation: none;\n}\n\n.robots {\n display: flex;\n width: 100%;\n height: 110rpx;\n justify-content: space-between;\n background-color: #ff0000;\n border-radius: 0 16rpx 16rpx;\n padding: 16rpx;\n animation-delay: 5s;\n}\n\n.robots::after {\n content: '';\n width: 24rpx;\n height: 24rpx;\n top: 0;\n left: 0;\n background-color: #ffffff;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n.robots::before {\n content: '';\n width: 24rpx;\n height: 24rpx;\n top: 0;\n left: 0;\n background-color: #ffffff;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n@keyframes scroll-up {\n 0% {\n transform: translateY(0);\n \n }\n\n 30% {\n transform: translateY(-150%);\n \n }\n\n 60% {\n transform: translateY(0);\n \n }\n}\n\n@keyframes scroll-down {\n 0% {\n transform: translateY(0);\n \n }\n\n 30% {\n transform: translateY(150%);\n \n }\n\n 60% {\n transform: translateY(0);\n \n }\n}\n\n@keyframes rotation {\n 20%, 100% {\n transform: rotate(180deg);\n }\n}\n\n@keyframes blink {\n 0% {\n height: 0;\n }\n\n 20% {\n height: 24rpx;\n }\n\n 100% {\n height: 24rpx;\n }\n}\n",
"component_name": "GalaxyChattyZebra11"
},
"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": [
"不支持 filter 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 filter 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 4177,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:40.575Z",
"updated_at": "2025-07-31T07:55:40.575Z"
}