本项目是一个高度可定制的浏览器起始页,替代浏览器默认的新标签页,提供更美观、高效的上网入口。
核心功能包括:
1. 动态视频背景,支持MP4格式全屏循环播放。
2. 实时时钟,每秒更新显示当前时间。
3. 智能搜索框,支持Google搜索引擎,输入关键词一键跳转。
4. 快捷链接区域,预设常用网站,支持自定义。
5. 毛玻璃效果卡片,半透明背景加模糊滤镜,提升视觉层次。
6. 自定义字体支持,可引入本地字体文件。
本项目为个人工具类网页,采用HTML/CSS/JS实现,已发布至GitHub仓库并支持在线预览。
我负责了全部的前端开发工作,包括:
1. 界面设计:参考Material Design风格,通过Flexbox布局实现内容居中,毛玻璃卡片效果使用backdrop-filter实现。
2. 视频背景:使用HTML5 Video标签配合CSS fixed定位和object-fit实现全屏视频背景,并设置pointer-events确保不影响搜索框交互。
3. 搜索功能:通过encodeURIComponent处理用户输入,拼接Google搜索URL实现跳转。
4. 自定义字体:通过@font-face引入本地字库,提升页面设计感。
该项目的难点在于视频背景与内容卡片的层级管理,通过z-index分层解决;搜索框与按钮的响应式适配,通过max-width和flex比例控制。