上图效果直接看文章侧边栏

组件功能：从颜值到实用性的兼顾

这个搜索组件不仅能实现百度搜索功能，还自带精致动画 —— 输入框底部有流动的彩色渐变阴影，"百度一下" 文字有扫光特效，按钮悬停时有半透明背景过渡。整体风格现代轻盈，能自然融入各种网站设计。

子比主题中使用教程

1. 进入子比主题后台，找到「自定义小工具」（通常在「外观 - 小工具」）
2. 添加一个「自定义 HTML」小工具，粘贴完整代码（CSS+HTML+JavaScript）
3. 调整小工具位置（如侧边栏、首页模块），保存后刷新页面即可看到效果

个性化修改建议

• 换搜索引擎：将https://www.baidu.com/s?wd=改为谷歌 (https://www.google.com/search?q=) 或必应 (https://www.bing.com/search?q=)
• 改默认关键词：修改placeholder="码小屋"和 JavaScript 中的'码小屋'
• 调颜色风格：修改.shadow__input中的渐变颜色（如#ff8fa0换为#ff6b6b）
• 删动画：移除@keyframes和对应的animation属性即可简化样式

通过这个案例能发现，子比主题的自定义 HTML 功能给了我们极大的创作空间 —— 只要懂一点前端知识，就能打造完全符合自己网站风格的实用工具。无论是搜索框、天气组件还是订阅模块，都能通过类似的方式实现，让网站更具个性和实用性。