{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".ask-ai-wrapper {\n display: inline-block;\n width: 280px; /* Adjustable width */\n position: relative;\n}\n\n.ask-ai-wrapper .ai-input-container {\n position: relative;\n display: flex;\n align-items: center;\n background: #ffffff;\n border: 2px solid #4a4a4a;\n border-radius: 12px;\n padding: 10px 14px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);\n overflow: hidden;\n}\n\n/* Input field */\n.ask-ai-wrapper .ai-input {\n flex-grow: 1;\n background: transparent;\n border: none;\n outline: none;\n font-family: sans-serif;\n font-size: 1rem;\n color: #333;\n padding: 6px 10px;\n width: 100%;\n position: relative; /* Ensure it stays above other elements */\n z-index: 2; /* Bring input to the front */\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.ask-ai-wrapper .ai-input::placeholder {\n color: #888;\n font-style: italic;\n}\n\n/* SVG container */\n.ask-ai-wrapper .icon-container {\n position: relative;\n width: 24px;\n height: 24px;\n transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);\n cursor: pointer;\n z-index: 2; /* Ensure SVG is clickable */\n}\n\n/* SVG animation */\n.ask-ai-wrapper .ai-icon path {\n fill: #4a4a4a;\n transform-origin: center;\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Subtle underline effect */\n.ask-ai-wrapper .underline-effect {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background: #ff6b6b;\n transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);\n z-index: 1;\n}\n\n/* Ripple circle */\n.ask-ai-wrapper .ripple-circle {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: rgba(255, 107, 107, 0.2);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 0;\n}\n\n/* Floating dots */\n.ask-ai-wrapper .floating-dots {\n position: absolute;\n inset: 0;\n pointer-events: none; /* Prevent dots from blocking input */\n z-index: 1; /* Below input but above background */\n}\n\n.ask-ai-wrapper .floating-dots span {\n position: absolute;\n width: 3px;\n height: 3px;\n background: #ff6b6b;\n border-radius: 50%;\n opacity: 0;\n transition:\n opacity 0.3s ease,\n transform 0.6s cubic-bezier(0.7, -0.5, 0.3, 1.5);\n}\n\n/* Background fade */\n.ask-ai-wrapper .bg-fade {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 90deg,\n rgba(255, 107, 107, 0.05),\n rgba(255, 235, 235, 0.1)\n );\n opacity: 0;\n transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n z-index: 0;\n}\n\n/* Hover and focus states */\n.ask-ai-wrapper .ai-input-container:hover,\n.ask-ai-wrapper .ai-input:focus-within .ai-input-container {\n border-color: #ff6b6b;\n box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);\n transform: translateY(-4px);\n}\n\n.ask-ai-wrapper .ai-input-container:hover .icon-container,\n.ask-ai-wrapper .ai-input:focus-within .icon-container {\n transform: translateY(-2px) scale(1.1);\n}\n\n.ask-ai-wrapper .ai-input-container:hover .ai-icon path,\n.ask-ai-wrapper .ai-input:focus-within .ai-icon path {\n fill: #ff6b6b;\n transform: scale(1.1) rotate(5deg);\n animation: gentleBounce 0.5s infinite alternate\n cubic-bezier(0.7, -0.5, 0.3, 1.5);\n}\n\n.ask-ai-wrapper .ai-input-container:hover .underline-effect,\n.ask-ai-wrapper .ai-input:focus-within .underline-effect {\n width: 100%;\n}\n\n.ask-ai-wrapper .ai-input-container:hover .ripple-circle,\n.ask-ai-wrapper .ai-input:focus-within .ripple-circle {\n width: 200px;\n height: 200px;\n}\n\n.ask-ai-wrapper .ai-input-container:hover .floating-dots span,\n.ask-ai-wrapper .ai-input:focus-within .floating-dots span {\n opacity: 1;\n animation: floatUp 1.2s infinite cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.ask-ai-wrapper .ai-input-container:hover .bg-fade,\n.ask-ai-wrapper .ai-input:focus-within .bg-fade {\n opacity: 1;\n}\n\n/* Focus state for input */\n.ask-ai-wrapper .ai-input:focus {\n color: #ff6b6b;\n}\n\n/* Animations */\n@keyframes gentleBounce {\n 0% {\n transform: scale(1.1) translateY(1px);\n }\n 100% {\n transform: scale(1.1) translateY(-1px);\n }\n}\n\n@keyframes floatUp {\n 0% {\n transform: translate(var(--x), var(--y)) scale(1);\n opacity: 0;\n }\n 50% {\n transform: translate(var(--x), calc(var(--y) - 15px)) scale(1.3);\n opacity: 1;\n }\n 100% {\n transform: translate(var(--x), calc(var(--y) - 30px)) scale(1);\n opacity: 0;\n }\n}\n\n/* Dot positions */\n.ask-ai-wrapper .floating-dots span:nth-child(1) {\n --x: 10px;\n --y: 10px;\n animation-delay: 0s;\n}\n.ask-ai-wrapper .floating-dots span:nth-child(2) {\n --x: -5px;\n --y: 5px;\n animation-delay: 0.2s;\n}\n.ask-ai-wrapper .floating-dots span:nth-child(3) {\n --x: 15px;\n --y: 0px;\n animation-delay: 0.4s;\n}\n.ask-ai-wrapper .floating-dots span:nth-child(4) {\n --x: -10px;\n --y: 15px;\n animation-delay: 0.6s;\n}\n"}

horrible-husky-56

👁 实时预览

📝 源代码